:root{--bg:#1c2027;--panel:#252a32;--panel2:#2d333d;--line:#3b424e;--text:#e8edf5;--muted:#9aa4b2;--blue:#2f7cff;--green:#39c889;--orange:#ff9c42;--ruler:24px}*{box-sizing:border-box}html,body{margin:0;height:100%;font:13px/1.4 Arial,'Malgun Gothic',sans-serif;background:#15191f;color:var(--text);overflow:hidden}button,input,select{font:inherit}.hidden{display:none!important}.app{height:100%;display:grid;grid-template-rows:38px 34px 48px 1fr 26px;grid-template-columns:82px 1fr 330px;grid-template-areas:'title title title' 'menu menu menu' 'ctx ctx ctx' 'tools work panel' 'status status status'}.title{grid-area:title;background:#181c22;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #333;gap:14px}.title b{color:#fff}.title span{color:var(--muted)}.title-actions{margin-left:auto;display:flex;gap:6px}.title-actions button{border:1px solid #46505d;border-radius:5px;padding:5px 9px;background:#232933;color:#dbe2ec}.menu{grid-area:menu;background:#22272f;border-bottom:1px solid #3a414c;display:flex;align-items:center;padding:0 8px;overflow:visible;z-index:200}.menu-item{position:relative;height:100%;display:flex;align-items:center}.menu-item>button{height:100%;border:0;background:none;color:#dbe2ec;padding:0 11px}.menu-item:hover>button,.menu-item.open>button{background:#313844}.dropdown{display:none;position:absolute;top:100%;left:0;min-width:190px;background:#1c2128;border:1px solid #48515f;box-shadow:0 10px 24px #0009;padding:5px;z-index:500}.menu-item.open .dropdown{display:block}.dropdown button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#e7edf5;padding:7px 10px}.dropdown button:hover:not(:disabled){background:#2f7cff33}.dropdown button:disabled{color:#657080}.dropdown hr{border:0;border-top:1px solid #39414c;margin:4px}.context{grid-area:ctx;background:#2a3039;border-bottom:1px solid #444;display:flex;align-items:center;gap:8px;padding:6px 12px;overflow:auto}.context label{display:flex;align-items:center;gap:4px;color:#aeb8c5;white-space:nowrap}.context input,.context select{width:74px;background:#1d2229;color:#fff;border:1px solid #4a5260;border-radius:4px;padding:5px}.context select{width:150px}.context input[type=color]{width:34px;padding:2px}.context .spacer{flex:1}.toolbox{grid-area:tools;background:#21262e;border-right:1px solid #3b424c;overflow:auto;padding:8px}.tool{width:100%;height:48px;margin:3px 0;border:1px solid transparent;background:transparent;color:#cbd3df;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tool b{font-size:17px}.tool.active{background:#2f7cff22;border-color:#2f7cff;color:#fff}.tool-sep{height:1px;background:#39414c;margin:7px 5px}.user-mode .admin-only{display:none}.workspace{grid-area:work;position:relative;background:#4a4f58;overflow:auto}.stage{position:relative;min-width:1100px;min-height:760px;display:flex;align-items:center;justify-content:center;padding:80px 70px 70px 86px}.artboard{position:relative;background:#fff;box-shadow:0 10px 35px #0008;transform-origin:center;overflow:hidden}.product-bg{position:absolute;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.27;z-index:1;pointer-events:none}.admin-mode.bg-unlocked .product-bg{pointer-events:auto;outline:2px dashed #74879e;cursor:move}.bg-resize{display:none;position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border:1px solid var(--blue);background:#fff}.admin-mode.bg-unlocked .bg-resize{display:block}.ruler{position:absolute;background:#20262e;z-index:40}.ruler-x{height:var(--ruler);left:var(--ruler);top:0}.ruler-y{width:var(--ruler);left:0;top:var(--ruler)}.ruler-corner{position:absolute;left:0;top:0;width:var(--ruler);height:var(--ruler);z-index:41;background:#1b2027;border-right:1px solid #444;border-bottom:1px solid #444;color:#8e98a5;font-size:9px;display:flex;align-items:center;justify-content:center}#areaLayer{position:absolute;inset:0;z-index:2}#objectLayer{position:absolute;inset:0;z-index:10;pointer-events:none}#objectLayer .object{pointer-events:auto}.area{position:absolute;border:2px dashed #e64a4a;background:#ff00000b;z-index:2}.area.active{border-color:#2f7cff;background:#fff}.area.inactive{filter:saturate(.3);opacity:.55}.area .tag{position:absolute;top:4px;left:5px;background:#111b;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px}.area-lock .area{pointer-events:auto;cursor:pointer}.admin-mode.print-unlocked .area{cursor:move}.area-handles,.safe-handles{display:none}.admin-mode.print-unlocked .area.active .area-handles,.admin-mode.safe-unlocked .area.active .safe-handles{display:block}.area-handle,.safe-handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #2f7cff;z-index:8}.area-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.safe{position:absolute;border:1.5px dashed #21a65d;pointer-events:none}.admin-mode.safe-unlocked .safe{pointer-events:auto;cursor:move}.safe-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.object{position:absolute;transform-origin:center;z-index:10;user-select:none;touch-action:none}.object.selected{outline:1.5px solid #2f7cff}.object.locked{opacity:.55}.object img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.text-content{display:inline-block;min-width:2px;white-space:pre-wrap;outline:none;cursor:text;line-height:var(--line-h);letter-spacing:var(--letter);font-family:var(--font)!important;font-size:var(--font-size);color:var(--fill);-webkit-text-stroke-width:var(--stroke-w);-webkit-text-stroke-color:var(--stroke-c);paint-order:stroke fill}.object.text{width:max-content!important;height:max-content!important}.handles{display:none}.object.selected .handles{display:block}.handle{position:absolute;width:10px;height:10px;background:#fff;border:1px solid #2f7cff;border-radius:1px}.nw{left:-6px;top:-6px}.ne{right:-6px;top:-6px}.sw{left:-6px;bottom:-6px}.se{right:-6px;bottom:-6px}.rotate{left:50%;top:-30px;margin-left:-5px;border-radius:50%;background:#2f7cff}.rotate:after{content:'';position:absolute;left:4px;top:9px;height:20px;border-left:1px solid #2f7cff}.size-badge{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);background:#111d;color:#fff;font-size:11px;padding:3px 7px;border-radius:4px;white-space:nowrap;pointer-events:none}.crop-mode{outline:2px solid var(--orange)!important;overflow:hidden}.crop-mode img{transform:translate(var(--crop-x),var(--crop-y)) scale(var(--crop-scale));transform-origin:center}.panel{grid-area:panel;background:#232831;border-left:1px solid #3b424e;overflow:auto}.panel-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;position:sticky;top:0;z-index:20}.panel-tabs button{border:0;border-bottom:1px solid #3b424e;background:#1e232b;color:#9fa9b7;padding:10px 4px}.panel-tabs button.active{color:#fff;border-bottom:2px solid var(--blue);background:#29303a}.panel h3{margin:0;padding:11px 12px;background:#2b313b;border-bottom:1px solid #3b424e}.section{padding:12px;border-bottom:1px solid #3b424e}.section label{display:block;color:#aeb8c5;margin:7px 0}.section input,.section select{width:100%;background:#181d24;color:#fff;border:1px solid #48515f;padding:6px;border-radius:4px}.section small{display:block;color:#9aa4b2;margin-top:8px}.lock-list{display:grid;gap:7px}.lock-row{border:1px solid #48515f;background:#1d2229;color:#e6edf5;border-radius:5px;text-align:left;padding:9px}.lock-row.unlocked{border-color:#2f7cff;background:#2f7cff22}.layer-row{display:flex;align-items:center;gap:7px;padding:7px;background:#1c2128;border:1px solid #3c4450;border-radius:5px;margin:5px 0}.layer-row.active{border-color:#2f7cff;background:#2f7cff1d}.layer-row span{flex:1}.btn{border:1px solid #4b5563;background:#313844;color:#fff;border-radius:5px;padding:6px 9px}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px}.template-card{border:1px solid #46505d;border-radius:7px;background:#1c2128;color:#dfe6ef;padding:10px;text-align:left;min-height:92px}.template-card:hover,.template-card.active{border-color:#2f7cff;background:#2f7cff18}.template-icon{font-size:28px;display:block;margin-bottom:5px}.template-card small{display:block;color:#9aa4b2;margin-top:4px}.status{grid-area:status;background:#1b2027;border-top:1px solid #373e48;display:flex;align-items:center;padding:0 10px;color:#aeb8c5;gap:15px}.status .msg{flex:1;text-align:center}.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,15px);background:#10141a;color:#fff;padding:10px 16px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s;z-index:999}.toast.show{opacity:1;transform:translate(-50%,0)}.app:fullscreen{background:#15191f}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:38px 42px 1fr 58px 26px;grid-template-areas:'title' 'ctx' 'work' 'tools' 'status'}.menu,.panel{display:none}.toolbox{display:flex;border:0;border-top:1px solid #3b424e;overflow-x:auto;padding:4px}.tool{min-width:70px;height:48px}.tool-sep{width:1px;height:40px;margin:4px 5px}.stage{padding:42px 25px 25px 42px;align-items:flex-start}.artboard{transform-origin:top left}.title span{display:none}}

/* RC1 Sprint 1-2 */
.btn.primary{background:#2f7cff;border-color:#2f7cff}.item-placeholder{border:1px solid #98a2ae;background-color:#f5f6f8;background-position:center;background-size:contain}.item-placeholder:not(.has-image):after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6f7884;font-size:18px;font-weight:700;background:repeating-linear-gradient(45deg,#f4f5f7,#f4f5f7 12px,#eceef1 12px,#eceef1 24px)}.area.draft{border-style:solid;border-color:#ff9c42;background:#ff9c4218;pointer-events:none}.wizard-backdrop{position:fixed;inset:0;z-index:2000;background:#090c10cc;display:flex;align-items:center;justify-content:center;padding:20px}.wizard-card{width:min(460px,100%);background:#252b34;border:1px solid #4b5563;border-radius:12px;box-shadow:0 24px 70px #000b;padding:22px}.wizard-card h2{margin:0 0 6px;font-size:21px}.wizard-card p{margin:0 0 17px;color:#9aa4b2}.wizard-card label{display:block;margin:11px 0;color:#c8d0dc}.wizard-card input,.wizard-card select{display:block;width:100%;margin-top:5px;background:#171c22;border:1px solid #4b5563;border-radius:6px;padding:9px;color:#fff}.wizard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wizard-note{background:#171c22;border:1px solid #3b424e;border-radius:6px;padding:10px;color:#9fc0ff}.wizard-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

.engine-monitor{display:grid;gap:6px}.engine-monitor>div{display:flex;justify-content:space-between;border:1px solid #3c4450;background:#1c2128;border-radius:5px;padding:7px}.engine-monitor b.ok{color:#39c889}.engine-monitor b.fail{color:#ff6b6b}.engine-monitor b.wait{color:#9aa4b2}.product-bg.has-image{border:0;background-color:transparent}.product-bg.has-image:after{display:none!important}

/* RC1 Sprint 1-3 Transform & Text UX */
.toolbox{padding:7px 6px}.tool{height:46px;min-width:66px}.tool b{font-size:15px;line-height:1}.tool span{font-size:11px;white-space:nowrap}.product-bg{touch-action:none}.admin-mode.bg-unlocked .product-bg{outline:2px solid #2f7cff;box-shadow:0 0 0 1px #fff8 inset}.bg-resize{width:14px;height:14px;right:-8px;bottom:-8px;z-index:12}.object.text{width:auto!important;height:auto!important;min-width:8px}.object.text.text-wrap{width:var(--object-width,auto)!important}.object.text .text-content{display:block;width:100%;height:auto;min-height:1em;white-space:pre-wrap;overflow-wrap:anywhere;text-align:var(--text-align);user-select:text}.object.text:not(.text-wrap) .text-content{white-space:pre;width:max-content}.handle{width:12px;height:12px}.nw{left:-7px;top:-7px}.ne{right:-7px;top:-7px}.sw{left:-7px;bottom:-7px}.se{right:-7px;bottom:-7px}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-grid label{margin:0}.property-editor h4{margin:14px 0 7px;color:#fff}.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:auto!important}.engine-monitor>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #39414c}.engine-monitor b.ok{color:#39c889}.engine-monitor b.fail{color:#ff6262}.engine-monitor b.wait{color:#f0b95a}

/* RC1 Sprint 1-3.1 Item background transform hotfix */
.admin-mode.bg-unlocked .product-bg{z-index:30!important;pointer-events:auto!important}
.admin-mode.bg-unlocked #areaLayer,.admin-mode.bg-unlocked #objectLayer{pointer-events:none}
.admin-mode.bg-unlocked .bg-resize{display:block!important;pointer-events:auto!important;z-index:31!important}
/* P00 Shortcut Command v1.0 */
kbd{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:1px 6px;border:1px solid #596473;border-bottom-width:2px;border-radius:4px;background:#242b34;color:#dfe7f2;font:11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.dropdown button kbd{margin-left:auto}.shortcut-guide{display:grid;gap:7px}.shortcut-guide>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06)}.shortcut-guide span{font-size:12px;color:#b9c2cf;text-align:right}.object.locked{cursor:not-allowed}.area.locked{cursor:not-allowed}

/* P02 Text Engine v1.0 */
.object.text{width:var(--object-width,auto)!important;height:auto!important;min-width:8px;cursor:move}
.object.text.editing{cursor:text;outline:1.5px solid #39c889}
.object.text .text-content{display:block;width:100%;min-height:var(--object-min-height,1em);white-space:pre-wrap;overflow-wrap:anywhere;text-align:var(--text-align);font-weight:var(--font-weight);font-style:var(--font-style);text-decoration:var(--text-decoration);user-select:text}
.object.text:not(.text-wrap){width:max-content!important}
.object.text:not(.text-wrap) .text-content{white-space:pre;width:max-content}
.handle.n{left:50%;top:-7px;margin-left:-6px;cursor:ns-resize}.handle.s{left:50%;bottom:-7px;margin-left:-6px;cursor:ns-resize}.handle.e{right:-7px;top:50%;margin-top:-6px;cursor:ew-resize}.handle.w{left:-7px;top:50%;margin-top:-6px;cursor:ew-resize}.handle.nw,.handle.se{cursor:nwse-resize}.handle.ne,.handle.sw{cursor:nesw-resize}.handle.rotate{cursor:grab}.handle.rotate:active{cursor:grabbing}
.property-editor textarea{width:100%;resize:vertical;min-height:76px;background:#181d24;color:#fff;border:1px solid #48515f;padding:7px;border-radius:4px;line-height:1.5}.text-edit-btn{width:100%;margin-top:7px}.text-style-buttons{display:flex;gap:6px;margin:8px 0}.text-style-buttons button{min-width:38px;height:32px;border:1px solid #4b5563;border-radius:5px;background:#252b34;color:#fff}.text-style-buttons button.active{border-color:#2f7cff;background:#2f7cff33;color:#fff}

/* P02-1 Text Edit Hotfix v1.0.1 */
.object.text.editing{outline:1.5px solid #2f7cff!important;cursor:text}
.object.text.editing .text-content{cursor:text;user-select:text;-webkit-user-select:text;caret-color:#111;min-width:1ch}
.object.text.editing .handles{display:none!important}
.object.text:not(.editing) .text-content{pointer-events:none}


/* P02-3 Text Property UX v1.2.0 */
.app{grid-template-rows:38px 34px 58px 1fr 26px}
.context{overflow:hidden;gap:6px;padding:6px 10px;min-width:0}
#contextFields{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;flex:1}
#contextFields::-webkit-scrollbar{height:4px}
.context label{font-size:11px;gap:3px}
.context input{width:64px;padding:4px 5px}
.context .context-font{width:170px}
.context .context-color{width:34px;height:28px;padding:2px}
.context .context-btn{height:28px;min-width:30px;border:1px solid #4a5260;border-radius:4px;background:#20262e;color:#fff;padding:3px 8px}
.context .context-btn.active{background:#2f7cff33;border-color:#2f7cff}
.context .context-sep{width:1px;height:25px;background:#4a5260;flex:0 0 auto}
.context .text-edit-action{border-color:#c58b2a;background:#9a651d33}
.panel-tabs{grid-template-columns:repeat(4,1fr)}
.text-property-panel{padding:12px}
.text-property-panel h4{margin:13px 0 7px;color:#fff}
.text-property-panel .font-select{font-size:14px;height:36px}
.text-property-panel .text-style-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.text-property-panel .text-style-buttons button{height:36px}
.text-property-panel .align-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0}
.text-property-panel .align-buttons button{height:34px;border:1px solid #4b5563;border-radius:5px;background:#252b34;color:#fff}
.text-property-panel .align-buttons button.active{border-color:#2f7cff;background:#2f7cff33}
.text-property-panel textarea{width:100%;min-height:74px;resize:vertical;background:#181d24;color:#fff;border:1px solid #48515f;border-radius:4px;padding:8px;line-height:1.5}
.text-property-panel .property-grid{grid-template-columns:1fr 1fr}
@media(max-width:1250px){.context .hide-compact{display:none}.context .context-font{width:140px}.panel{width:auto}}


/* P01 Image Engine Finish v1.3.0 */
.panel-tabs{grid-template-columns:repeat(5,1fr)}
.object.image{overflow:hidden;background:#eef1f5}
.object.image>img{width:100%;height:100%;display:block;pointer-events:none;transform-origin:center;object-position:center}
.object.image.crop-mode{outline:2px solid var(--orange)!important;cursor:move}
.object.image.crop-mode:after{content:'CROP';position:absolute;right:5px;top:5px;background:#f08a24;color:#fff;font-size:10px;font-weight:bold;padding:2px 5px;border-radius:3px;pointer-events:none}
.object.image.crop-mode .handles{display:none!important}
.image-property-panel h4{margin:13px 0 7px;color:#fff}
.image-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.image-action-grid button,.image-wide-action{border:1px solid #4b5563;background:#313844;color:#fff;border-radius:5px;padding:8px 7px}
.image-action-grid button.active{border-color:#2f7cff;background:#2f7cff2b}
.image-wide-action{display:block;width:100%;margin-top:7px}
.image-crop-help{padding:8px;border:1px solid #6c4b26;background:#8a581c22;color:#f0c58d;border-radius:5px;margin-top:9px}
.context .image-action{border-color:#3f6fae;background:#24558b33}
.context .crop-action{border-color:#c58b2a;background:#9a651d33}

/* P03 Object Engine v1.4.0 */
.layer-row button{flex:0 0 auto;border:0;background:transparent;color:#cbd3df;cursor:pointer;padding:2px 4px;border-radius:4px}.layer-row button:hover{background:#2f7cff33;color:#fff}.layer-row.is-hidden{opacity:.48}.layer-row.is-hidden span{text-decoration:line-through}.layer-eye{font-size:11px}.layer-lock{font-size:12px}.layer-empty{padding:10px;color:#7f8997;text-align:center;border:1px dashed #3c4450;border-radius:5px}.object-layer span,.system-layer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#smartGuideLayer{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:visible;--smart-guide-thickness:1px}.smart-guide{position:absolute;background:#ff3b93;box-shadow:none;pointer-events:none}.smart-guide.vertical{top:0;bottom:0;width:var(--smart-guide-thickness)}.smart-guide.horizontal{left:0;right:0;height:var(--smart-guide-thickness)}.smart-guide span{position:absolute;background:#ff3b93;color:#fff;font-size:10px;line-height:1;padding:3px 5px;border-radius:3px;white-space:nowrap}.smart-guide.vertical span{top:5px;left:4px}.smart-guide.horizontal span{top:4px;left:5px}.smart-guide.guide-kind-safe{background:#24b86a}.smart-guide.guide-kind-safe span{background:#24b86a}.smart-guide.guide-kind-area{background:#2f7cff}.smart-guide.guide-kind-area span{background:#2f7cff}.smart-guide.guide-kind-item{background:#7a8da6}.smart-guide.guide-kind-item span{background:#7a8da6}.smart-guide.guide-kind-object{background:#ff3b93}.smart-guide.guide-kind-object span{background:#ff3b93}.snap-settings .check-row{display:flex;align-items:center;gap:8px}.snap-settings .check-row input{width:auto}


/* P05 Property Engine v1.6.0 */
.property-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.property-head>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ratio-lock{border:1px solid #4b5563;background:#252b34;color:#cbd3df;border-radius:5px;padding:5px 8px;cursor:pointer;font-size:11px}.ratio-lock.active{border-color:#2f7cff;background:#2f7cff2b;color:#fff}.unit-field{display:block!important}.unit-field>span:first-child{display:block;margin-bottom:4px}.input-unit{display:flex;align-items:center;background:#171c22;border:1px solid #48515f;border-radius:5px;overflow:hidden}.input-unit input{width:100%!important;border:0!important;background:transparent!important;border-radius:0!important}.input-unit em{font-style:normal;color:#8792a1;font-size:10px;padding:0 6px;border-left:1px solid #39414c;white-space:nowrap}.property-toggles{display:flex;gap:14px;margin:10px 0;padding:8px;border:1px solid #39414c;border-radius:5px;background:#1c2128}.property-toggles label{display:flex!important;align-items:center;gap:6px;margin:0!important}.property-toggles input{width:auto!important}.property-tip{display:block;padding:7px 8px;border-radius:5px;background:#2f7cff12;border:1px solid #2f7cff35;color:#9fc0ff;line-height:1.45}.property-editor input[type=number],.text-property-panel input[type=number],.image-property-panel input[type=number]{font-variant-numeric:tabular-nums}.property-editor input[type=number]:focus,.text-property-panel input[type=number]:focus,.image-property-panel input[type=number]:focus{outline:none;border-color:#2f7cff;box-shadow:0 0 0 2px #2f7cff22}

/* P06 Command & History v1.7 */
#statusHistory{color:#9fc0ff;white-space:nowrap}.dropdown button:disabled{opacity:.45}.engine-monitor .ok{color:#50d890}

/* P07-P09 RC1 Productivity Bundle v1.8.0 */
.workspace{cursor:default;scroll-behavior:auto}
.workspace.is-panning,.workspace.is-panning *{cursor:grabbing!important;user-select:none!important}
.app:has(.tool[data-tool="hand"].active) .workspace{cursor:grab}
.quick-action-bar{position:fixed;z-index:900;display:flex;gap:4px;padding:5px;border:1px solid #566273;border-radius:7px;background:#161b22ee;box-shadow:0 8px 24px #0009;backdrop-filter:blur(6px)}
.quick-action-bar button{height:28px;border:1px solid #46515f;border-radius:5px;background:#262d37;color:#edf2f8;padding:3px 9px;cursor:pointer;white-space:nowrap}
.quick-action-bar button:hover{border-color:#2f7cff;background:#2f7cff2c}
.object-context-menu{position:fixed;z-index:1100;min-width:190px;padding:6px;border:1px solid #596473;border-radius:7px;background:#1b2027;box-shadow:0 12px 30px #000b}
.object-context-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;border:0;border-radius:4px;background:transparent;color:#e8edf5;padding:8px 10px;text-align:left;cursor:pointer}
.object-context-menu button:hover{background:#2f7cff30}
.object-context-menu hr{border:0;border-top:1px solid #3d4652;margin:4px 2px}
.object-context-menu .context-submenu{position:relative}
.object-context-menu .context-submenu-trigger span{margin-left:auto;font-size:18px;line-height:1;color:#aeb8c7}
.object-context-menu .context-submenu-panel{display:none;position:absolute;left:100%;top:-6px;min-width:245px;padding:6px;margin-left:4px;border:1px solid #596473;border-radius:7px;background:#1b2027;box-shadow:0 12px 30px #000b}
.object-context-menu .context-submenu:hover>.context-submenu-panel,.object-context-menu .context-submenu:focus-within>.context-submenu-panel{display:block}
.object-context-menu .context-submenu-panel.open-left{left:auto;right:100%;margin-left:0;margin-right:4px}
.object-context-menu kbd{margin-left:auto;color:#aeb8c7;font:11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:900px){.quick-action-bar{display:none}}

/* RC1 Completion Bundle v1.9 */
.selection-marquee{position:absolute;z-index:80;border:1px solid #2f80ff;background:rgba(47,128,255,.12);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
.object-align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 12px}.object-align-grid.two{grid-template-columns:1fr 1fr}.object-align-grid button,.group-actions button{min-height:34px;border:1px solid #3c4654;background:#222a34;color:#e9eef5;border-radius:5px;cursor:pointer}.object-align-grid button:hover,.group-actions button:hover{border-color:#2f80ff;background:#28374b}.group-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.group-actions kbd{font-size:10px;color:#aeb8c5}.quick-action-bar.multi{gap:2px}.quick-action-bar.multi button{min-width:34px;padding:5px 7px}.object.grouped::after{content:'G';position:absolute;right:-7px;top:-8px;display:none;min-width:15px;height:15px;line-height:15px;text-align:center;border-radius:8px;background:#2f80ff;color:white;font:700 9px Arial}.object.grouped.selected::after{display:block}


/* RC1 Final UX Bundle v2.0.0 */
.handle-small .handle{width:8px;height:8px}.handle-small .handle.n,.handle-small .handle.s{margin-left:-4px}.handle-small .handle.e,.handle-small .handle.w{margin-top:-4px}
.handle-large .handle{width:16px;height:16px;border-width:2px}.handle-large .handle.n,.handle-large .handle.s{margin-left:-8px;top:-10px}.handle-large .handle.s{top:auto;bottom:-10px}.handle-large .handle.e,.handle-large .handle.w{margin-top:-8px;right:-10px}.handle-large .handle.w{right:auto;left:-10px}
.object.selected{outline-width:1px;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.handle{transition:transform .1s ease,background .1s ease}.handle:hover{transform:scale(1.25);background:#e8f1ff}
.editor-preferences{display:grid;gap:9px}.editor-preferences label{display:grid;gap:5px}.editor-preferences .check-row{display:flex;align-items:center;gap:8px}.editor-preferences .check-row input{width:auto}
.layer-tools{display:grid;gap:7px}.layer-tools input{width:100%}.object-layer[draggable="true"]{cursor:grab}.object-layer.dragging{opacity:.35}.object-layer.drag-over{outline:1px solid #2f7cff;background:#2f7cff25}
.numeric-scrub{cursor:ew-resize}.numeric-scrub input{cursor:text}
.hide-status-detail #statusMessage{opacity:.7}.status .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* RC1 UI Polish Bundle v2.1.0
   - compact context bar without horizontal scrollbar
   - hidden workspace scrollbars while preserving pan/scroll
   - right panel scroll isolated to active view
   - cleaner spacing, tabs, inputs and visual hierarchy */
:root{
  --toolbar-h:52px;
  --sidebar-w:74px;
  --property-w:312px;
}
.app{
  grid-template-rows:38px 34px var(--toolbar-h) minmax(0,1fr) 26px;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--property-w);
  min-width:0;
  min-height:0;
}
.title{padding-inline:12px;gap:10px}
.title span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{padding-inline:6px}
.menu-item>button{padding-inline:10px}

/* Top property/context bar */
.context{
  min-width:0;
  overflow:hidden!important;
  padding:5px 10px;
  gap:7px;
  flex-wrap:nowrap;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.035);
}
.context>strong{
  flex:0 0 auto;
  min-width:42px;
  color:#f2f6fb;
  font-size:12px;
  white-space:nowrap;
}
#contextFields{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  gap:5px;
  min-width:0;
  overflow:hidden!important;
  scrollbar-width:none!important;
}
#contextFields::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.context .spacer{display:none!important;flex:0 0 0!important}
.context label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  margin:0;
  font-size:10px;
  color:#aeb8c5;
}
.context input,.context select{
  height:28px;
  width:61px;
  min-width:0;
  padding:3px 6px;
  border-color:#46515f;
  background:#181d24;
  font-size:11px;
}
.context .context-font{width:145px;max-width:145px}
.context .context-color{width:31px;height:28px;padding:2px}
.context .context-btn{
  flex:0 0 auto;
  height:28px;
  min-width:29px;
  padding:2px 7px;
  border-radius:5px;
  font-size:11px;
}
.context .context-sep{width:3px!important;height:30px!important;margin-inline:8px!important;background:#7da2d2!important;border-radius:2px;box-shadow:0 0 0 1px rgba(125,162,210,.18)}
#zoomValue{flex:0 0 auto;min-width:38px;font-size:11px;color:#d9e2ef}

/* Editor Quick Control: fixed immediately left of Zoom */
.quick-lock-controls{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
}
.quick-lock-btn{
  flex:0 0 auto;
  height:27px;
  min-width:48px;
  padding:2px 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid #46515f;
  border-radius:5px;
  background:#181d24;
  color:#aeb9c8;
  font:600 10px/1 Arial,"Noto Sans KR",sans-serif;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,transform .12s ease;
}
.quick-lock-btn:hover{border-color:#6b7b90;background:#222a34;color:#eef5ff}
.quick-lock-btn:active{transform:scale(.94)}
.quick-lock-btn.is-locked{border-color:#2f80ff;background:#18345d;color:#eef6ff;box-shadow:inset 0 0 0 1px #2f80ff33}
.quick-lock-btn.is-unlocked{border-color:#46515f;background:#181d24;color:#9aa6b5}
.quick-lock-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.quick-lock-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
.quick-lock-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-lock-kind{white-space:nowrap}
.quick-control-sep{flex:0 0 auto;width:1px;height:19px;margin:0 3px;background:#3a4350}
.context .zoom-control{margin-left:0!important;flex:0 0 auto;font-size:10px}
.context .zoom-control input{width:105px;padding:0}

/* Left toolbar */
.toolbox{
  overflow:hidden!important;
  padding:6px 5px;
  scrollbar-width:none;
}
.toolbox::-webkit-scrollbar{display:none}
.tool{height:43px;min-width:0;margin:2px 0;border-radius:6px}
.tool b{font-size:14px}.tool>span:not(.tool-icon){font-size:10px}
.tool-sep{margin:5px 6px}

/* Workspace: keep wheel/pan behavior, hide browser scrollbars */
.workspace{
  min-width:0;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
.workspace::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.stage{
  box-sizing:border-box;
  min-width:max(100%,980px);
  min-height:max(100%,680px);
  padding:62px 54px 54px 70px;
}
.artboard{will-change:transform;transition:box-shadow .12s ease}
.artboard:hover{box-shadow:0 12px 38px #0009}
.ruler-x{right:0}.ruler-y{bottom:0}

/* Right property panel: outer panel never scrolls; only active view scrolls */
.panel{
  min-width:0;
  min-height:0;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
  background:#222831;
}
.panel-tabs{
  flex:0 0 auto;
  position:relative;
  top:auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:1px solid #3b424e;
  background:#1e232b;
}
.panel-tabs button{
  min-width:0;
  padding:10px 2px 9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
}
.panel-view{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden!important;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#596473 transparent;
  overscroll-behavior:contain;
}
.panel-view::-webkit-scrollbar{width:6px}
.panel-view::-webkit-scrollbar-track{background:transparent}
.panel-view::-webkit-scrollbar-thumb{background:#596473;border-radius:6px}
.panel-view::-webkit-scrollbar-thumb:hover{background:#728095}
.panel h3{
  padding:10px 12px;
  font-size:13px;
  position:sticky;
  top:0;
  z-index:4;
  background:#2a313b;
}
.section{padding:11px 12px}
.section input,.section select,.text-property-panel textarea{
  min-height:32px;
  border-radius:5px;
}
.property-grid{gap:7px}
.property-head{position:sticky;top:0;z-index:3;background:#222831;padding:2px 0 8px}
.text-property-panel,.image-property-panel{padding:10px 11px}
.text-property-panel textarea{resize:none;min-height:72px;max-height:130px}

/* Cleaner status bar */
.status{
  min-width:0;
  gap:10px;
  padding-inline:9px;
  font-size:11px;
  overflow:hidden;
}
.status>span{white-space:nowrap;min-width:0}
.status .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#templateStatus{max-width:31%}
#statusHistory,#statusSnap,#statusZoom{flex:0 0 auto}

/* Compact desktop breakpoints: progressively hide low-priority toolbar controls */
@media(max-width:1500px){
  :root{--property-w:296px}
  .context .context-font{width:126px;max-width:126px}
  .context label{font-size:0;gap:0}
  .context label input,.context label select{font-size:11px}
  .context>label:last-of-type{font-size:10px;gap:4px}
  .context .context-btn{padding-inline:6px}
}
@media(max-width:1260px){
  :root{--property-w:280px;--sidebar-w:68px}
  .context .context-font{width:112px;max-width:112px}
  .context [data-context-align="justify"],.context .hide-compact{display:none!important}
  .stage{padding:52px 42px 46px 58px;min-width:max(100%,900px)}
}


/* RC1 Toolbar UX v2.2.0: intuitive monochrome SVG tools */
.toolbox{
  padding:7px 5px 8px;
  background:linear-gradient(180deg,#20262f 0%,#1c222a 100%);
  border-right:1px solid #39414d;
}
.tool{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:23px 13px;
  place-items:center;
  width:100%;
  height:45px;
  padding:3px 3px 4px;
  color:#dbe4ef;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .08s ease;
}
.tool:hover{
  color:#fff;
  background:#2b3440;
  border-color:#465363;
}
.tool:active{transform:translateY(1px)}
.tool.active{
  color:#fff;
  background:linear-gradient(180deg,#153d70,#102f59);
  border-color:#3c91f7;
  box-shadow:inset 3px 0 0 #5aabff,0 0 0 1px #0d2038;
}
.tool-icon{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.tool-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.tool-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px!important;
  line-height:12px;
  font-weight:600;
  letter-spacing:-.35px;
  pointer-events:none;
}
.tool kbd{
  position:absolute;
  top:3px;
  right:3px;
  min-width:12px;
  padding:0 2px;
  border:0;
  border-radius:3px;
  background:#111821b8;
  color:#92a3b7;
  font:700 8px/13px ui-monospace,SFMono-Regular,Consolas,monospace;
  box-shadow:none;
  pointer-events:none;
}
.tool.active kbd{color:#d9edff;background:#071a30c9}
.tool-sep{
  height:1px;
  margin:6px 7px;
  background:linear-gradient(90deg,transparent,#46505d 22%,#46505d 78%,transparent);
  border:0;
}
@media (max-height:820px){
  .tool{height:41px;grid-template-rows:21px 12px}
  .tool-icon,.tool-icon svg{width:19px;height:19px}
  .tool-sep{margin:4px 7px}
}


/* RC1 Tool Function UX v2.3 */
.tool.toggle-on{
  color:#dfffee;
}
.tool.toggle-on::before{
  content:'';
  position:absolute;
  left:2px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background:#39c889;
}
.tool.toggle-on .tool-icon{
  color:#39c889;
}
.app:has(.tool[data-tool="zoom"].active) .workspace,
.app:has(.tool[data-tool="zoom"].active) .artboard{
  cursor:zoom-in;
}
.app:has(.tool[data-tool="shape"].active) .artboard{
  cursor:crosshair;
}
.zoom-marquee{
  position:absolute;
  z-index:999;
  border:1px solid #2f7cff;
  background:#2f7cff20;
  box-shadow:0 0 0 1px #fff8 inset;
  pointer-events:none;
}
.shape-draft{
  position:absolute;
  z-index:36;
  border:1.5px dashed #2f7cff;
  background:#2f7cff25;
  pointer-events:none;
}
.object.shape{
  overflow:visible;
}
.object.shape .shape-inner{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Zoom clarity optimization: avoid long-lived GPU bitmap caching. */
.artboard{
  will-change:auto!important;
  backface-visibility:visible!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.artboard .object,
.artboard .text-content,
.artboard .area,
.artboard .safe,
.artboard .handles,
.artboard .tag{
  backface-visibility:visible;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.artboard.zoom-rendering{
  image-rendering:auto;
}
.artboard.zoom-crisp,
.artboard.zoom-crisp *{
  image-rendering:auto!important;
}

/* Text Engine 2.0 - Illustrator style custom font picker */
.font-picker{position:relative;min-width:0}.font-picker-trigger{width:100%;height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px;border:1px solid #48515f;border-radius:5px;background:#171c22;color:#eef3f9;cursor:pointer;text-align:left}.font-picker-trigger:hover,.font-picker-trigger[aria-expanded="true"]{border-color:#2f80ff;box-shadow:0 0 0 2px rgba(47,128,255,.15)}.font-picker-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-picker-trigger i{font-style:normal;color:#91a0b3}.font-picker-popover{position:absolute;z-index:500;top:calc(100% + 5px);left:0;width:300px;max-width:min(360px,calc(100vw - 24px));padding:8px;border:1px solid #4b5665;border-radius:7px;background:#20262f;box-shadow:0 16px 40px rgba(0,0,0,.42)}.context .font-picker-popover{width:310px}.font-picker-search-row{display:flex;gap:5px}.font-picker-search{width:100%;height:32px!important;padding:0 9px!important;border:1px solid #48515f!important;border-radius:5px!important;background:#14191f!important;color:#fff!important}.font-picker-close{width:32px;border:1px solid #48515f;border-radius:5px;background:#2a313b;color:#dce4ee;cursor:pointer}.font-picker-tabs{display:flex;gap:4px;margin:7px 0}.font-picker-tabs button{flex:1;height:27px;border:1px solid #414b58;border-radius:4px;background:#252c35;color:#aeb9c7;font-size:11px;cursor:pointer}.font-picker-tabs button.active{border-color:#2f80ff;background:#2f80ff2b;color:#fff}.font-picker-list{max-height:280px;overflow:auto;border:1px solid #39424e;border-radius:5px;background:#181d23}.font-picker-option{display:flex;align-items:center;gap:7px;min-height:34px;padding:3px 8px;border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer;font-size:14px}.font-picker-option:last-child{border-bottom:0}.font-picker-option.active{background:#2f80ff2c;outline:1px solid #2f80ff inset}.font-picker-option.selected span{color:#8db7ff}.font-favorite{flex:0 0 22px;border:0;background:transparent;color:#596473;cursor:pointer;font-size:14px}.font-favorite.on{color:#f2bd3c}.font-picker-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-picker-empty{padding:20px;text-align:center;color:#8490a0;font-size:12px}.font-picker-help{padding:7px 2px 0;color:#8e99a8;font-size:10px}.font-picker-label{position:relative}.context .font-picker-label{width:170px}.context .context-font{width:100%;max-width:none}.text-property-panel .font-select{width:100%}

/* Text Engine 2.0 font picker portal: toolbar overflow와 완전히 분리 */
.font-picker-popover.font-picker-portal{position:fixed!important;z-index:100000!important;top:0;left:0;max-width:calc(100vw - 16px);margin:0}


/* Text Engine 2.0.2: native textarea editor for stable Korean IME composition */
.object.text .text-editor{
  display:block;
  width:max-content;
  min-width:1ch;
  height:1em;
  min-height:1em;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  resize:none;
  overflow:hidden;
  background:transparent;
  color:var(--fill);
  font:inherit;
  font-family:var(--font)!important;
  font-size:var(--font-size);
  font-weight:var(--font-weight);
  font-style:var(--font-style);
  line-height:var(--line-h);
  letter-spacing:var(--letter);
  text-align:var(--text-align);
  text-decoration:var(--text-decoration);
  white-space:pre;
  caret-color:#111;
  -webkit-text-stroke-width:var(--stroke-w);
  -webkit-text-stroke-color:var(--stroke-c);
}
.object.text.text-wrap .text-editor{width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.object.text:not(.text-wrap) .text-editor{width:var(--object-width,2px)!important;height:var(--object-min-height,1em)!important;min-height:var(--object-min-height,1em)!important;white-space:pre!important;overflow:hidden!important}


/* RC1 Help Center modal */
.help-modal-backdrop{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(8,12,18,.76);backdrop-filter:blur(3px)}
.help-modal-backdrop.hidden{display:none}
.help-modal{width:min(1040px,calc(100vw - 56px));height:min(760px,calc(100vh - 56px));display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;border:1px solid #465263;border-radius:12px;background:#1f2630;color:#edf3fb;box-shadow:0 26px 80px rgba(0,0,0,.55)}
.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px;border-bottom:1px solid #394452;background:#202833}
.help-modal-header h2{margin:2px 0 0;font-size:22px}.help-modal-eyebrow{font-size:11px;letter-spacing:.08em;color:#72a9ff}
.help-modal-close{width:38px;height:38px;border:1px solid #475466;border-radius:8px;background:#293341;color:#fff;font-size:25px;line-height:1;cursor:pointer}.help-modal-close:hover{background:#364457;border-color:#6e87a7}
.help-modal-tabs{display:flex;gap:6px;padding:10px 24px 0;background:#202833}.help-modal-tabs button{padding:10px 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:#aeb9c8;font-weight:700;cursor:pointer}.help-modal-tabs button.active{color:#fff;border-bottom-color:#3f8cff}
.help-modal-body{overflow:auto;padding:22px 24px 30px}.help-view{display:none}.help-view.active{display:block}.help-intro h3{margin:0 0 5px;font-size:21px}.help-intro p{margin:0 0 22px;color:#aeb9c8}
.help-shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.help-shortcut-grid section{padding:16px;border:1px solid #3b4655;border-radius:9px;background:#252e3a}.help-shortcut-grid h4{margin:0 0 11px;color:#8fbcff;font-size:14px}.help-shortcut-grid section>div{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:10px;min-height:32px;border-top:1px solid rgba(255,255,255,.055)}.help-shortcut-grid section>div:first-of-type{border-top:0}.help-shortcut-grid kbd{justify-self:start;white-space:nowrap}.help-shortcut-grid span{color:#d4dce7;font-size:13px}
.guide-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guide-steps section{display:flex;gap:14px;padding:18px;border:1px solid #3b4655;border-radius:9px;background:#252e3a}.guide-steps section>b{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#176dd6;color:#fff;font-size:12px}.guide-steps h4{margin:1px 0 7px;font-size:15px}.guide-steps p{margin:0;color:#bdc7d5;line-height:1.65;font-size:13px}.guide-tip{display:flex;gap:12px;margin-top:16px;padding:15px 17px;border:1px solid #385b83;border-radius:9px;background:#172d46}.guide-tip strong{color:#76afff}.guide-tip span{color:#d7e5f8}
.help-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #394452;background:#202833}.help-modal-footer span{color:#909dad;font-size:12px}.help-modal-footer .btn{min-width:86px}
body.help-open{overflow:hidden}
@media(max-width:760px){.help-modal-backdrop{padding:10px}.help-modal{width:100%;height:100%;border-radius:8px}.help-shortcut-grid,.guide-steps{grid-template-columns:1fr}.help-shortcut-grid section>div{grid-template-columns:125px 1fr}}

/* Template Manager RC1 */
.template-save-form{display:grid;gap:7px}.template-save-form label{margin:0}.template-save-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.template-save-state{padding:8px;border-radius:5px;background:#171c22;color:#9fb0c5;font-size:11px}.saved-template-list{display:grid;gap:8px}.saved-template-card{border:1px solid #46505d;border-radius:7px;background:#1c2128;padding:10px;display:grid;gap:7px}.saved-template-card.active{border-color:#2f7cff;background:#2f7cff18}.saved-template-head{display:flex;align-items:flex-start;gap:8px}.saved-template-head b{flex:1}.saved-template-badge{font-size:10px;border:1px solid #526071;border-radius:10px;padding:2px 6px;color:#b9c4d2}.saved-template-meta{color:#9aa4b2;font-size:11px}.saved-template-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.saved-template-actions .btn{padding:5px 4px;font-size:11px}.user-mode #templatePanel .template-save-form,.user-mode #templatePanel h3:nth-of-type(3),.user-mode #replaceBgBtn,.user-mode #newProjectBtn{display:none}.template-loading{opacity:.65;pointer-events:none}

/* RC1 UX: 객체 종류별 선택 핸들 크기 */
.object.image .handle{
  width:15px;
  height:15px;
  border-width:2px;
}
.object.image .handle.n,.object.image .handle.s{margin-left:-7.5px}
.object.image .handle.e,.object.image .handle.w{margin-top:-7.5px}
.object.image .handle.n{top:-9px}
.object.image .handle.s{bottom:-9px}
.object.image .handle.e{right:-9px}
.object.image .handle.w{left:-9px}
.object.image .handle.nw{left:-9px;top:-9px}
.object.image .handle.ne{right:-9px;top:-9px}
.object.image .handle.sw{left:-9px;bottom:-9px}
.object.image .handle.se{right:-9px;bottom:-9px}
.object.image .handle.rotate{width:13px;height:13px;top:-34px;margin-left:-6.5px}
.object.image .handle.rotate:after{left:5px;top:11px;height:22px}

.object.text .handle{
  width:8px;
  height:8px;
  border-width:1px;
}
.object.text .handle.n,.object.text .handle.s{margin-left:-4px}
.object.text .handle.e,.object.text .handle.w{margin-top:-4px}
.object.text .handle.n{top:-5px}
.object.text .handle.s{bottom:-5px}
.object.text .handle.e{right:-5px}
.object.text .handle.w{left:-5px}
.object.text .handle.nw{left:-5px;top:-5px}
.object.text .handle.ne{right:-5px;top:-5px}
.object.text .handle.sw{left:-5px;bottom:-5px}
.object.text .handle.se{right:-5px;bottom:-5px}
.object.text .handle.rotate{width:8px;height:8px;top:-25px;margin-left:-4px}
.object.text .handle.rotate:after{left:3px;top:7px;height:17px}

/* 인쇄영역 이름은 필요할 때만 표시 */
.area .tag{
  opacity:0;
  visibility:hidden;
  transform:translateY(-2px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
  pointer-events:none;
}
.area:hover .tag{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.admin-mode.bg-unlocked .product-bg.selected-bg{outline:2px solid #2f7cff!important;box-shadow:0 0 0 1px #fff inset,0 0 0 3px #2f7cff33!important}.workspace-size-editor .btn,.background-geometry-editor .btn{margin-top:9px;width:100%}

/* V3.30 item background 8-direction transform handles */
.bg-transform-handles{position:absolute;inset:0;pointer-events:none}
.bg-resize{display:none;position:absolute;width:14px!important;height:14px!important;margin:0!important;border:1px solid #2f7cff;background:#fff;z-index:32;pointer-events:auto}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize{display:block!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-nw{left:-8px;top:-8px;right:auto;bottom:auto;cursor:nwse-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-n{left:50%;top:-8px;right:auto;bottom:auto;transform:translateX(-50%);cursor:ns-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-ne{right:-8px;top:-8px;left:auto;bottom:auto;cursor:nesw-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-e{right:-8px;top:50%;left:auto;bottom:auto;transform:translateY(-50%);cursor:ew-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-se{right:-8px;bottom:-8px;left:auto;top:auto;cursor:nwse-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-s{left:50%;bottom:-8px;right:auto;top:auto;transform:translateX(-50%);cursor:ns-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-sw{left:-8px;bottom:-8px;right:auto;top:auto;cursor:nesw-resize!important}
.admin-mode.bg-unlocked .product-bg.selected-bg .bg-resize.bg-w{left:-8px;top:50%;right:auto;bottom:auto;transform:translateY(-50%);cursor:ew-resize!important}

/* V3.31 item background non-proportional rendering fix */
.product-bg.has-image{background-size:100% 100%!important;background-position:center;background-repeat:no-repeat}

/* V3.32 keep the active item-background resize cursor during pointer capture */
html.bg-resizing-ew,html.bg-resizing-ew *{cursor:ew-resize!important}
html.bg-resizing-ns,html.bg-resizing-ns *{cursor:ns-resize!important}
html.bg-resizing-nwse,html.bg-resizing-nwse *{cursor:nwse-resize!important}
html.bg-resizing-nesw,html.bg-resizing-nesw *{cursor:nesw-resize!important}

/* RC1 Safe Area Offset Guide */
.safe-tool-wrap{position:relative;width:100%}
.safe-tool-wrap>.tool{margin:3px 0}
.safe-tool-flyout{display:none;position:absolute;left:calc(100% + 7px);top:0;width:210px;padding:5px;border:1px solid #4a5563;border-radius:7px;background:#1d232b;box-shadow:0 14px 34px rgba(0,0,0,.48);z-index:900}
.safe-tool-wrap:hover .safe-tool-flyout,.safe-tool-wrap:focus-within .safe-tool-flyout{display:block}
.safe-tool-flyout:before{content:'';position:absolute;right:100%;top:0;width:9px;height:100%}
.safe-tool-flyout button{display:block;width:100%;padding:9px 10px;border:0;border-radius:5px;background:transparent;color:#eef3f8;text-align:left;cursor:pointer}
.safe-tool-flyout button+button{margin-top:3px}
.safe-tool-flyout button:hover{background:#2f7cff2b}
.safe-tool-flyout b{display:block;font-size:12px}
.safe-tool-flyout small{display:block;margin-top:2px;color:#96a2b1;font-size:10px}

.safe-area-modal-card{width:min(680px,calc(100vw - 32px));height:auto;max-height:calc(100vh - 48px)}
.safe-area-modal-card .help-modal-header p{margin:5px 0 0;color:#98a4b3;font-size:12px}
.safe-area-form{padding:22px 26px;overflow:auto}
.safe-mode-summary{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:15px;border:1px solid #44505e;border-radius:7px;background:#1c222a}
.safe-mode-summary span{color:#9eb8df}.safe-mode-summary b{color:#fff}
.safe-value-label{display:block;color:#c9d2de}
.safe-value-label>span{display:block;margin-bottom:6px}
.safe-value-input{display:flex;align-items:center;max-width:250px;border:1px solid #4b5665;border-radius:6px;background:#151a20;overflow:hidden}
.safe-value-input input{width:100%;padding:10px;border:0;outline:0;background:transparent;color:#fff;font-size:17px}
.safe-value-input em{padding:0 12px;color:#aeb8c5;font-style:normal}
.safe-result-preview{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:18px 0;padding:16px;border:1px solid #46515e;border-radius:8px;background:#171c22}
.safe-result-preview div{display:grid;gap:4px}.safe-result-preview span{color:#8f9baa;font-size:11px}.safe-result-preview strong{font-size:17px;color:#fff}.safe-result-preview i{color:#7f8b99;font-style:normal;font-size:20px}.safe-result-preview small{grid-column:1/-1;color:#adb8c5;border-top:1px solid #323b46;padding-top:10px}
.safe-guide-note{margin-top:14px;padding:10px 12px;border-radius:6px;background:#bbc3cc12;color:#aeb7c2;font-size:11px}
.safe-area-modal-card .help-modal-footer{display:flex;align-items:center;gap:8px}.safe-area-modal-card .help-modal-footer .spacer{flex:1}.danger-soft{border-color:#6b4b50!important;color:#ffc2c7!important;background:#5b252a2b!important}

/* Safe area is a non-interactive recommendation guide only. */
.area .safe,.admin-mode.safe-unlocked .area .safe{position:absolute;border:1.25px dashed rgba(151,158,168,.78);background:transparent;pointer-events:none!important;cursor:default!important;z-index:5}
.safe-shade{position:absolute;inset:0;pointer-events:none!important;z-index:4}
.safe-shade i{position:absolute;display:block;background:rgba(137,145,156,.055);pointer-events:none}
.safe-shade-top{left:0;right:0;top:0}.safe-shade-bottom{left:0;right:0;bottom:0}.safe-shade-left{left:0}.safe-shade-right{right:0}
.safe-handles{display:none!important}

/* Photo Workspace — insert-before-crop */
.photo-workspace-backdrop{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;background:rgba(5,8,12,.82);backdrop-filter:blur(8px)}
.photo-workspace-backdrop.hidden{display:none}
.photo-workspace-shell{width:min(1180px,calc(100vw - 48px));height:min(820px,calc(100vh - 48px));display:grid;grid-template-rows:54px 1fr 68px;border:1px solid #46505d;border-radius:10px;overflow:hidden;background:#171c22;box-shadow:0 28px 80px rgba(0,0,0,.55)}
.photo-workspace-header{display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid #343c47;background:#20262e;color:#eef3f8}
.photo-workspace-header h2{font-size:15px;margin:0}.photo-workspace-header p{margin:0;color:#8f9aa8;font-size:11px}.photo-workspace-header .spacer{flex:1}.photo-workspace-meta{padding:6px 10px;border:1px solid #414b58;border-radius:5px;background:#161b21;color:#c7d0db;font-size:11px}
.photo-workspace-close{width:30px;height:30px;border:0;border-radius:5px;background:transparent;color:#aeb8c5;font-size:19px;cursor:pointer}.photo-workspace-close:hover{background:#303844;color:white}
.photo-workspace-body{min-height:0;display:grid;grid-template-columns:1fr 250px;background:#11161c}
.photo-workspace-canvas{position:relative;display:grid;place-items:center;overflow:hidden;background-color:#0f1419;background-image:linear-gradient(45deg,#171d24 25%,transparent 25%),linear-gradient(-45deg,#171d24 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#171d24 75%),linear-gradient(-45deg,transparent 75%,#171d24 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.photo-workspace-frame{position:relative;overflow:hidden;border:1px solid #94a0ae;background:#252c35;box-shadow:0 0 0 1px rgba(0,0,0,.7),0 18px 55px rgba(0,0,0,.4);cursor:grab;touch-action:none}
.photo-workspace-frame.is-dragging{cursor:grabbing}.photo-workspace-frame:before{content:"인쇄영역";position:absolute;z-index:3;left:8px;top:8px;padding:3px 6px;border-radius:3px;background:rgba(16,20,26,.72);color:#d5dce5;font-size:10px;letter-spacing:.03em;pointer-events:none}.photo-workspace-frame:after{content:"";position:absolute;z-index:2;inset:0;border:1px dashed rgba(255,255,255,.25);pointer-events:none}
.photo-workspace-frame img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center center;user-select:none;pointer-events:none;will-change:transform}
.photo-workspace-side{padding:18px;border-left:1px solid #343c47;background:#1c222a;color:#d6dde6}.photo-workspace-side h3{margin:0 0 6px;font-size:12px}.photo-workspace-side p{margin:0 0 16px;color:#8f9aa8;font-size:11px;line-height:1.55}
.photo-workspace-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.photo-workspace-actions button{height:34px;border:1px solid #46515f;border-radius:5px;background:#252c35;color:#d4dbe4;font-size:11px;cursor:pointer}.photo-workspace-actions button:hover{border-color:#718099;background:#2b3440}.photo-workspace-zoom{margin-top:20px;padding-top:16px;border-top:1px solid #343c47}.photo-workspace-zoom label{display:flex;justify-content:space-between;margin-bottom:8px;color:#b8c2cf;font-size:11px}.photo-workspace-zoom input{width:100%}.photo-workspace-help{margin-top:18px;padding:11px;border:1px solid #343c47;border-radius:6px;background:#171c22;color:#8995a4;font-size:10px;line-height:1.7}
.photo-workspace-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;border-top:1px solid #343c47;background:#20262e}.photo-workspace-footer .photo-workspace-hint{margin-right:auto;color:#8d98a6;font-size:10px}.photo-workspace-footer button{min-width:86px;height:34px;border-radius:5px;border:1px solid #46515f;background:#252c35;color:#d8e0e9;cursor:pointer}.photo-workspace-footer button.primary{border-color:#2e7bf0;background:#2f7cff;color:white;font-weight:700}.photo-workspace-footer button:hover{filter:brightness(1.08)}
body.photo-workspace-open{overflow:hidden}

/* Photo Workspace RC1 polish */
.photo-workspace-title{display:flex;align-items:center;gap:9px;min-width:0}.photo-workspace-title h2{white-space:nowrap}.photo-workspace-title p{white-space:nowrap}.photo-workspace-mode{display:inline-flex;align-items:center;height:22px;padding:0 7px;border:1px solid #4a5665;border-radius:4px;background:#161b21;color:#9fb1c7;font-size:10px;font-weight:700;letter-spacing:.06em}
.photo-workspace-frame:before{display:none!important}.photo-workspace-grid{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.38;background-image:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.34) calc(33.333% - .5px),rgba(255,255,255,.34) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.34) calc(66.666% - .5px),rgba(255,255,255,.34) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.34) calc(33.333% - .5px),rgba(255,255,255,.34) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.34) calc(66.666% - .5px),rgba(255,255,255,.34) calc(66.666% + .5px),transparent calc(66.666% + .5px));transition:opacity .15s ease}.photo-workspace-frame:not(.is-dragging) .photo-workspace-grid{opacity:.18}.photo-workspace-frame.is-dragging .photo-workspace-grid{opacity:.5}
.photo-workspace-area-card{display:grid;gap:4px;margin:-2px 0 18px;padding:12px;border:1px solid #394451;border-radius:7px;background:linear-gradient(180deg,#202831,#192029);box-shadow:inset 0 1px rgba(255,255,255,.025)}.photo-workspace-area-card span{color:#7f8b9a;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.photo-workspace-area-card strong{color:#e6ebf1;font-size:12px}.photo-workspace-area-card small{color:#b5c0cd;font-size:11px}.photo-workspace-area-card em{justify-self:start;margin-top:3px;padding:3px 6px;border-radius:4px;background:#12171d;color:#7faeff;font-size:9px;font-style:normal}
.photo-workspace-actions button.active{border-color:#2f7cff;background:#223c65;color:#fff;box-shadow:inset 0 0 0 1px rgba(77,145,255,.22)}
.photo-workspace-zoom-row{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;gap:8px}.photo-workspace-zoom-row button{width:28px;height:28px;border:1px solid #46515f;border-radius:4px;background:#252c35;color:#d7dee7;font-size:16px;line-height:1;cursor:pointer}.photo-workspace-zoom-row button:hover{border-color:#718099;background:#2b3440}.photo-workspace-zoom-row input{min-width:0}
.photo-workspace-help{display:grid;gap:7px}.photo-workspace-help div{display:flex;align-items:center;justify-content:space-between;gap:12px}.photo-workspace-help kbd{min-width:56px;padding:3px 5px;border:1px solid #3e4855;border-bottom-color:#252c35;border-radius:4px;background:#11161c;color:#b7c2cf;font:9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center;box-shadow:0 1px 0 rgba(255,255,255,.04)}.photo-workspace-help span{color:#8d99a8;font-size:10px}

/* Font Library RC1 - categorized 30+ Korean display fonts */
.font-picker-category-row{display:flex;gap:4px;overflow-x:auto;padding:0 0 7px;scrollbar-width:thin}.font-picker-category-row button{flex:0 0 auto;height:25px;padding:0 9px;border:1px solid #3e4855;border-radius:12px;background:#1a2027;color:#94a1b1;font-size:10px;cursor:pointer}.font-picker-category-row button:hover{border-color:#607087;color:#dce5f0}.font-picker-category-row button.active{border-color:#3d8cff;background:#176dd633;color:#fff}.font-picker-list{max-height:340px}.font-picker-option{min-height:49px;padding:5px 8px;gap:8px}.font-picker-option .font-picker-meta{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.15;font-family:Arial,'Malgun Gothic',sans-serif!important}.font-picker-option .font-picker-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dfe7f1;font-size:11px;font-weight:700}.font-picker-option .font-picker-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6f7b8a;font-size:9px}.font-picker-option em{flex:0 0 112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:#edf3fb;font-style:normal;font-size:18px;line-height:1.25}.font-picker-option.selected .font-picker-meta b,.font-picker-option.selected em{color:#8db7ff}.font-picker-option.active em{color:#fff}.font-picker-trigger .font-picker-value{font-size:13px}.font-picker-popover{padding:9px}.font-picker-help{border-top:1px solid #343d49;margin-top:6px;padding-top:7px}


/* RC2 Photo Frame Presets */
.object.image{overflow:visible;background:transparent}
.object.image .image-mask{position:absolute;inset:0;overflow:hidden;background:#eef1f5;pointer-events:none}
.object.image .image-mask>img{display:block;pointer-events:none}
.object.image .image-mask.frame-rectangle{border-radius:0;clip-path:none}
.object.image .image-mask.frame-rounded{border-radius:14%;clip-path:none}
.object.image .image-mask.frame-circle{border-radius:50%;clip-path:ellipse(50% 50% at 50% 50%)}
.object.image .image-mask.frame-heart{border-radius:0;clip-path:polygon(50% 92%,8% 53%,5% 34%,10% 18%,22% 8%,36% 8%,50% 21%,64% 8%,78% 8%,90% 18%,95% 34%,92% 53%)}
.object.image.crop-mode .image-mask{outline:2px solid var(--orange)}
.frame-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px}
.frame-preset-grid button{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #46505d;border-radius:7px;background:#1b2027;color:#dfe6ef;cursor:pointer;font-size:11px}
.frame-preset-grid button:hover{border-color:#6b91c9;background:#26313f}
.frame-preset-grid button.active{border-color:#2f7cff;background:#2f7cff25;box-shadow:0 0 0 1px #2f7cff inset;color:#fff}
.frame-preview{display:block;width:34px;height:28px;border:2px solid #9db9df;background:linear-gradient(135deg,#5f7898,#b6c7dc)}
.frame-preview.rounded{border-radius:8px}
.frame-preview.circle{width:30px;height:30px;border-radius:50%}
.frame-preview.heart{width:34px;height:30px;border:0;background:#9db9df;clip-path:polygon(50% 92%,8% 53%,5% 34%,10% 18%,22% 8%,36% 8%,50% 21%,64% 8%,78% 8%,90% 18%,95% 34%,92% 53%)}
.frame-panel-help{display:block;margin:0 0 12px!important;padding:7px 8px;border:1px solid #3b4c63;border-radius:5px;background:#182432;color:#9fc0e9!important;line-height:1.45}

.preview3d-backdrop{position:fixed;inset:0;z-index:12000;background:rgba(7,11,18,.82);display:grid;place-items:center;padding:18px}.preview3d-backdrop.hidden{display:none}.preview3d-shell{width:min(1180px,97vw);max-height:94vh;overflow:hidden;background:#172033;border:1px solid #33415a;border-radius:0;box-shadow:0 24px 70px rgba(0,0,0,.55);color:#eef4ff}.preview3d-header{display:flex;align-items:center;gap:18px;padding:14px 16px;border-bottom:1px solid #33415a;background:#121a2b}.preview3d-header>div:first-child{flex:1}.preview3d-header span{font-size:11px;color:#72a7ff;letter-spacing:.06em}.preview3d-header h2{margin:2px 0 2px;font-size:18px}.preview3d-header p{margin:0;color:#96a5bb;font-size:12px}.preview3d-head-actions{display:flex;gap:7px}.preview3d-head-actions button{height:36px;padding:0 13px;border:1px solid #42516a;border-radius:0;background:#22304a;color:#eaf1ff;font-weight:700;cursor:pointer}.preview3d-head-actions #preview3dAutoBtn.active{background:#246ee9;border-color:#4b8eff}.preview3d-head-actions #preview3dClose{width:38px;padding:0;background:#b8322b;border-color:#d6554d;font-size:22px}.preview3d-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:650px}.preview3d-stage{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#f7fbff 0,#dce6f2 44%,#aebdce 100%);cursor:grab;user-select:none}.preview3d-stage.dragging{cursor:grabbing}.preview3d-stage canvas{display:block;width:min(100%,920px);height:auto;max-height:72vh;touch-action:none}.preview3d-badge{position:absolute;left:18px;top:16px;padding:6px 11px;border-radius:0;background:rgba(255,255,255,.9);color:#40506a;font-size:11px;font-weight:800}.preview3d-drag-note{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:7px 12px;border-radius:0;background:rgba(15,23,38,.78);color:#fff;font-size:12px;white-space:nowrap}.preview3d-panel{padding:16px;background:#1c2638;border-left:1px solid #35435a;overflow:auto}.preview3d-panel h3{margin:0 0 16px;font-size:15px}.preview3d-panel label{display:grid;gap:6px;margin-bottom:14px;color:#aebbd0;font-size:12px}.preview3d-panel select,.preview3d-panel input[type=range]{width:100%}.preview3d-panel select{padding:9px;border:1px solid #465670;border-radius:0;background:#111928;color:#fff}.preview3d-view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:3px 0 16px}.preview3d-view-buttons button,.preview3d-refresh{padding:9px;border:1px solid #465670;border-radius:0;background:#27344a;color:#dfe8f6;cursor:pointer}.preview3d-view-buttons button.active{border-color:#4d91ff;background:#2464bd;color:#fff}.preview3d-range span{display:flex;justify-content:space-between}.preview3d-check{display:flex!important;align-items:center;gap:8px!important}.preview3d-refresh{width:100%;border-color:#3b7bd4;background:#245ca5;color:#fff;font-weight:700}.preview3d-info{margin-top:14px;padding:12px;border-radius:8px;background:#111928;color:#aab7ca;font-size:12px;line-height:1.6}.preview3d-info b{color:#eef4ff}.preview3d-tool .tool-icon svg{fill:none;stroke:currentColor;stroke-width:1.7}.preview3d-tool{margin-top:3px}
@media(max-width:860px){.preview3d-body{grid-template-columns:1fr}.preview3d-panel{border-left:0;border-top:1px solid #35435a;max-height:290px}.preview3d-stage{min-height:430px}.preview3d-head-actions button:not(#preview3dClose){display:none}.preview3d-header p{display:none}}
/* RC2 Production 3D Engine — GLB model viewer */
.preview3d-stage canvas{width:100%;height:100%;min-height:560px;object-fit:contain}
.preview3d-panel #preview3dCapture{margin-top:8px;background:#34445d;border-color:#5b6d88}
.preview3d-panel #preview3dCapture:hover{background:#405471}
.preview3d-panel select:focus,.preview3d-panel input:focus,.preview3d-panel button:focus-visible{outline:2px solid #62a0ff;outline-offset:2px}
@media(max-width:860px){.preview3d-stage canvas{min-height:420px}}

/* DDG FLOW V3 G2-2 Customer Studio */
.customer-studio{grid-template-rows:42px 62px 42px 1fr 28px;grid-template-columns:72px 1fr 300px}
.customer-studio .title{background:#161b22;padding:0 16px}
.customer-studio .title>span{font-weight:700;color:#c8d1dc}
.customer-studio #roleBtn{display:none}
.customer-studio .menu{padding:0 14px;display:flex;gap:18px;background:#fff;border-bottom:1px solid #d9e0e8;color:#202a36;overflow:hidden}
.customer-brand{min-width:220px;display:flex;flex-direction:column;justify-content:center}
.customer-brand b{font-size:16px;color:#182230}.customer-brand span{font-size:11px;color:#718096;margin-top:2px}
.customer-main-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.customer-main-actions button{height:38px;border:1px solid #ced7e2;background:#f8fafc;color:#263443;border-radius:8px;padding:0 12px;font-weight:700;white-space:nowrap}
.customer-main-actions button:hover{border-color:#2f7cff;background:#eef4ff}.customer-main-actions button b{display:inline-flex;width:19px;height:19px;align-items:center;justify-content:center;border-radius:50%;background:#e3eaf4;margin-right:5px;font-size:11px}
.customer-main-actions .customer-submit{background:#2f7cff;color:#fff;border-color:#2f7cff;padding:0 20px}
.customer-studio .context{background:#f5f7fa;border-color:#dfe5ec;color:#445264;padding:5px 12px}
.customer-studio .context #contextFields,.customer-studio .quick-lock-controls,.customer-studio .quick-control-sep{display:none!important}
.customer-studio .context #statusTool:after{content:' · 사진 또는 문구를 추가한 뒤 자유롭게 배치하세요.';font-weight:400;color:#788698}
.customer-studio .toolbox{background:#f8fafc;border-color:#d9e0e8;padding:8px 6px}
.customer-studio .toolbox .tool{display:none;color:#4b596a}
.customer-studio .toolbox .tool[data-tool="text"],.customer-studio .toolbox .tool[data-tool="image"],.customer-studio .toolbox .tool[data-tool="shape"],.customer-studio .toolbox #preview3dBtn{display:flex;height:58px;background:#fff;border:1px solid #dce3eb;margin:7px 0}
.customer-studio .toolbox .tool:hover,.customer-studio .toolbox .tool.active{background:#eef4ff;border-color:#2f7cff;color:#1763d6}
.customer-studio .toolbox .tool-sep{display:none}
.customer-studio .workspace{background:#e9edf2}
.customer-studio .panel{background:#fff;border-color:#d9e0e8;color:#253140;padding:0;overflow:auto}
.customer-side-head{padding:22px 20px 17px;border-bottom:1px solid #e3e8ee;background:#f8fafc}.customer-side-head span{font-size:11px;color:#2f7cff;font-weight:700}.customer-side-head b{display:block;font-size:20px;margin-top:3px}.customer-side-head p{margin:7px 0 0;color:#778496;font-size:12px;line-height:1.55}
.customer-step-list{padding:14px;display:grid;gap:9px}.customer-step-list button{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #dce3eb;border-radius:10px;background:#fff;padding:12px;color:#253140}.customer-step-list button:hover{border-color:#2f7cff;background:#f4f8ff}.customer-step-list i{font-style:normal;display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#eaf1ff;color:#2469d8;font-weight:800}.customer-step-list span{display:flex;flex-direction:column}.customer-step-list small{color:#7f8b99;margin-top:2px}
.customer-help-card{margin:2px 14px 14px;padding:13px;border-radius:9px;background:#f5f7fa;border:1px solid #e1e6ec}.customer-help-card p{margin:5px 0 0;color:#687587;font-size:12px;line-height:1.55}
.customer-side-submit{display:block;width:calc(100% - 28px);margin:0 14px 18px;padding:13px;border:0;border-radius:9px;background:#2f7cff;color:#fff;font-weight:800;font-size:14px}
.customer-studio .status{background:#fff;border-color:#d9e0e8;color:#6c7887}.customer-studio #templateStatus{font-weight:700;color:#364355}
.customer-studio .ruler{background:#e2e7ed}.customer-studio .ruler-corner{background:#d9e0e8;border-color:#c9d1da;color:#657181}
@media(max-width:1050px){.customer-brand span{display:none}.customer-main-actions button{padding:0 8px}.customer-main-actions button b{display:none}.customer-studio{grid-template-columns:68px 1fr 260px}}

/* =========================================================
   DDG FLOW V3 G2.5 — Customer Studio Visual Design System
   Customer mode only. Admin Studio colors remain unchanged.
   ========================================================= */
.customer-studio{
  --customer-workspace:#555b65;
  --customer-workspace-deep:#4b515a;
  --customer-canvas:#fff;
  --customer-select:#2f7cff;
}

/* Keep the simple customer controls bright, while restoring a
   professional mid-dark editing environment around the canvas. */
.customer-studio .workspace{
  background:
    radial-gradient(circle at 50% 42%,#626873 0,#555b65 46%,#4b515a 100%);
}
.customer-studio .stage{
  background:transparent;
}
.customer-studio .artboard{
  background:var(--customer-canvas);
  box-shadow:
    0 18px 42px rgba(0,0,0,.38),
    0 2px 8px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.16);
}

/* Dark rulers visually connect to the workspace and improve contrast. */
.customer-studio .ruler{
  background:#20262e;
  color:#aeb8c5;
}
.customer-studio .ruler-corner{
  background:#1b2027;
  border-color:#3d4652;
  color:#9ba6b3;
}

/* Improve object selection visibility over both bright and dark photos. */
.customer-studio .object.selected{
  outline:2px solid var(--customer-select);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9));
}
.customer-studio .object.selected .handle{
  width:11px;
  height:11px;
  background:#fff;
  border:2px solid var(--customer-select);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.customer-studio .object.selected .rotate{
  background:var(--customer-select);
  border-color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.customer-studio .object.selected .rotate:after{
  border-color:var(--customer-select);
}
.customer-studio .size-badge{
  background:rgba(17,22,29,.94);
  box-shadow:0 2px 7px rgba(0,0,0,.35);
}

/* Print and safe areas remain subtle in customer mode so the product
   image and the customer's design stay visually dominant. */
.customer-studio .area{
  border-color:rgba(230,74,74,.68);
  background:rgba(255,0,0,.025);
}
.customer-studio .area.active{
  border-color:rgba(47,124,255,.78);
  background:rgba(47,124,255,.035);
}
.customer-studio .safe{
  border-color:rgba(33,166,93,.62);
}

/* DDG FLOW V3 G2-3 — Customer essential navigation tools */
.customer-studio .toolbox .tool[data-tool="select"],
.customer-studio .toolbox .tool[data-tool="hand"],
.customer-studio .toolbox .tool[data-tool="zoom"],
.customer-studio .toolbox .tool[data-tool="guide"]{
  display:flex!important;
  height:58px;
  background:#fff;
  border:1px solid #dce3eb;
  margin:7px 0;
  color:#4b596a;
}
.customer-studio .toolbox .tool[data-tool="guide"].active{
  background:#eaf7ef;
  border-color:#25a866;
  color:#16834e;
}
.customer-studio .customer-tool-separator{
  height:1px;
  margin:11px 5px;
  background:#cfd7e1;
}
.customer-studio .toolbox .customer-helper-tool .tool-label,
.customer-studio .toolbox .customer-edit-tool .tool-label{
  font-size:11px;
  font-weight:700;
}

/* G3 Customer Workflow */
.customer-studio [data-customer-action].step-done{border-color:#21a366!important;background:#effbf5!important;color:#137a4a!important}
.customer-studio [data-customer-action].step-done b,.customer-studio [data-customer-action].step-done i{background:#21a366!important;color:#fff!important}
.customer-studio [data-customer-action="submit"]:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.2)}
.customer-studio [data-customer-action="submit"].submit-ready{opacity:1;box-shadow:0 6px 18px rgba(47,124,255,.24)}
.customer-submit-modal{position:fixed;inset:0;z-index:10000;background:rgba(10,15,22,.62);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .18s ease}
.customer-submit-modal.hidden{display:none}.customer-submit-modal.open{opacity:1}
.customer-submit-dialog{width:min(460px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 26px 80px rgba(0,0,0,.34);position:relative;transform:translateY(8px);transition:transform .18s ease;color:#243041}
.customer-submit-modal.open .customer-submit-dialog{transform:translateY(0)}
.customer-submit-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:30px;color:#8591a0;cursor:pointer}
.customer-submit-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#eaf8f1;color:#1b9a5b;font-size:26px;font-weight:800;margin-bottom:12px}
.customer-submit-dialog h2{font-size:22px;margin:0 0 6px}.customer-submit-lead{margin:0 0 20px;color:#6f7c8c}
.customer-submit-summary{border:1px solid #e1e6ed;border-radius:12px;overflow:hidden}.customer-submit-summary>div{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #edf0f4}.customer-submit-summary>div:last-child{border-bottom:0}.customer-submit-summary span{color:#687587}.customer-submit-summary b{color:#253041}
.customer-submit-warning{margin-top:14px;padding:10px 12px;border-radius:10px;background:#fff7e8;color:#9a6514}.customer-submit-warning.hidden{display:none}.customer-submit-warning p{margin:3px 0;font-size:13px}
.customer-submit-actions{display:flex;gap:10px;margin-top:20px}.customer-submit-actions button{flex:1;height:46px;border-radius:10px;font-weight:700;cursor:pointer}.customer-submit-cancel{border:1px solid #d8dfe8;background:#fff;color:#536173}.customer-submit-confirm{border:0;background:#2f7cff;color:#fff}
/* G4 Customer Order Flow */
.customer-submit-confirm:disabled{opacity:.65;cursor:wait}
.customer-complete-modal .customer-submit-dialog{max-width:460px}
.customer-job-number{margin:18px 0;padding:15px 18px;border:1px solid #b9d2ff;border-radius:10px;background:#eef5ff;color:#1457c8;font-size:20px;font-weight:800;letter-spacing:.03em;text-align:center}
.customer-complete-guide{margin:0 0 18px;padding:14px 16px;border-radius:9px;background:#f6f7f9;text-align:left}
.customer-complete-guide b{display:block;margin-bottom:5px;color:#222}
.customer-complete-guide p{margin:0;color:#667085;font-size:13px;line-height:1.5}
.customer-complete-close{background:#2f7df6!important;color:#fff!important;border-color:#2f7df6!important}
.customer-studio #templateStatus[data-autosaved]::after{content:' · 자동저장';color:#2f7df6;font-weight:700}

/* G4 Hotfix: customer context panel */
.customer-studio #customerContextPanel{height:100%;display:flex;flex-direction:column;overflow:auto;background:#fff}
.customer-studio .customer-context-card{padding:18px;border-bottom:1px solid #e5eaf1}
.customer-studio .customer-context-card h3{margin:0 0 4px;font-size:20px;color:#182235}
.customer-studio .customer-context-card>p{margin:0 0 16px;color:#788397;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-studio .customer-context-card h4{margin:18px 0 10px;font-size:13px;color:#344054}
.customer-studio .customer-context-empty{margin:18px;padding:18px;border:1px solid #dbe4ef;border-radius:12px;background:#f7f9fc}
.customer-studio .customer-context-empty b{display:block;margin-bottom:7px;color:#25324a}
.customer-studio .customer-context-empty p{margin:0;color:#667085;font-size:12px;line-height:1.55}
.customer-studio .customer-frame-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.customer-studio .customer-field{display:flex;flex-direction:column;gap:7px;margin:12px 0;font-size:12px;font-weight:700;color:#344054}
.customer-studio .customer-field textarea,.customer-studio .customer-field input[type=number]{width:100%;box-sizing:border-box;border:1px solid #ccd6e3;border-radius:8px;padding:10px;background:#fff;color:#172033}
.customer-studio .customer-field input[type=color]{width:100%;height:40px;border:1px solid #ccd6e3;border-radius:8px;background:#fff;padding:4px}
.customer-studio .customer-field-row{display:grid;grid-template-columns:1fr 90px;gap:10px}
.customer-studio #customerContextPanel>.customer-side-submit{margin:16px;margin-top:auto;flex:0 0 auto}

/* G4 mode switch: ADMIN/USER share one editor during development */
.mode-switch{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px;border:1px solid #46505d;border-radius:6px;background:#151a20}
.mode-switch-btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:4px;color:#aeb8c6;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
.mode-switch-btn:hover{color:#fff;background:#28313c}
.mode-switch-btn.active{color:#fff;background:#2f7cf6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* S1 Product Item Print Area Policy */
.product-area-policy{display:grid;gap:10px}.product-area-policy-head{display:flex;align-items:center;justify-content:space-between}.product-area-policy-head span{font-size:12px;color:#9fb0c4}.product-area-selector{display:grid;gap:6px}.product-area-choice{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:9px;border:1px solid #46505c;border-radius:7px;background:#2c333b;cursor:pointer}.product-area-choice.active{border-color:#4388e8;background:#25394f}.product-area-choice.inactive{opacity:.62}.product-area-choice span{display:grid;gap:2px}.product-area-choice small{color:#98a6b7}.product-area-choice em{font-style:normal;font-size:11px;color:#8fa2b8}.product-area-choice.active em{color:#69a9ff}.product-area-policy-actions{display:flex;gap:6px}.area.product-inactive{opacity:.28;filter:grayscale(1);pointer-events:none}.area.product-inactive .tag:after{content:' · 비활성';color:#ffbf69}.layer-row.product-inactive{opacity:.45}.layer-row.product-inactive span:after{content:' (비활성)';color:#ffbf69}

/* PATCH 008 · 비회원/정보누락 회원 배송정보 입력 */
.customer-submit-dialog{max-height:min(90vh,820px);overflow:auto}
.customer-contact-section{margin-top:16px;padding:16px;border:1px solid #e1e6ed;border-radius:12px;background:#f8fafc}
.customer-contact-section.hidden{display:none}
.customer-contact-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:13px}
.customer-contact-head b{font-size:15px;color:#253041}.customer-contact-head span{font-size:11px;color:#8a6670}
.customer-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.customer-contact-grid label{display:flex;flex-direction:column;gap:7px}.customer-contact-grid label.is-wide{grid-column:1/-1}
.customer-contact-grid label>span{font-size:12px;font-weight:700;color:#536173}.customer-contact-grid em{font-style:normal;color:#e05252}.customer-contact-grid small{font-weight:500;color:#929dac}
.customer-contact-grid input{width:100%;height:42px;border:1px solid #d8dfe8;border-radius:8px;background:#fff;padding:0 12px;color:#253041;outline:none;box-sizing:border-box}
.customer-contact-grid input:focus{border-color:#7aaeff;box-shadow:0 0 0 3px rgba(47,124,255,.1)}
.customer-address-row{display:grid;grid-template-columns:1fr 94px;gap:8px}.customer-address-search{height:42px;border:1px solid #b8c3d1;border-radius:8px;background:#fff;color:#435166;font-weight:700;cursor:pointer}
.customer-contact-error{margin:10px 0 0;padding:9px 10px;border-radius:8px;background:#fff0f0;color:#c23c3c;font-size:12px}.customer-contact-error.hidden{display:none}
@media(max-width:560px){.customer-submit-modal{padding:10px}.customer-submit-dialog{padding:22px 18px}.customer-contact-grid{grid-template-columns:1fr}.customer-contact-grid label.is-wide{grid-column:auto}.customer-contact-head{display:block}.customer-contact-head span{display:block;margin-top:4px}}

/* PATCH 009 · 시안접수 배송정보 폼 UI 완성도 개선 */
.customer-submit-modal .customer-submit-dialog{
  width:min(560px,100%);
  max-height:94vh;
  padding:30px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.customer-submit-modal .customer-contact-section{
  margin-top:18px;
  padding:18px;
  border:1px solid #dfe6ef;
  border-radius:14px;
  background:#f8fafc;
}
.customer-submit-modal .customer-contact-head{
  display:block;
  margin:0 0 16px;
  padding-bottom:13px;
  border-bottom:1px solid #e6ebf1;
}
.customer-submit-modal .customer-contact-head b{
  display:block;
  font-size:16px;
  line-height:1.35;
  color:#1f2b3c;
}
.customer-submit-modal .customer-contact-head span{
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:#7b8796;
}
.customer-submit-modal .customer-contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 12px;
}
.customer-submit-modal .customer-contact-grid label{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
  margin:0;
}
.customer-submit-modal .customer-contact-grid label.is-wide{
  grid-column:1/-1;
}
.customer-submit-modal .customer-contact-grid label>span{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  color:#344054;
}
.customer-submit-modal .customer-contact-grid em{
  font-size:11px;
  font-style:normal;
  font-weight:700;
  color:#e04545;
}
.customer-submit-modal .customer-contact-grid small{
  font-size:11px;
  font-weight:500;
  color:#8b96a5;
}
.customer-submit-modal .customer-contact-grid input{
  display:block;
  width:100%;
  min-width:0;
  height:46px;
  margin:0;
  padding:0 13px;
  border:1px solid #cfd8e4;
  border-radius:9px;
  background:#fff;
  box-sizing:border-box;
  color:#1f2937;
  font:inherit;
  font-size:14px;
  line-height:46px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.customer-submit-modal .customer-contact-grid input::placeholder{color:#a0a9b5}
.customer-submit-modal .customer-contact-grid input:focus{
  border-color:#4f8df7;
  box-shadow:0 0 0 3px rgba(47,124,255,.12);
}
.customer-submit-modal .customer-contact-grid input[readonly]{
  background:#f3f6f9;
  color:#5b6675;
  cursor:default;
}
.customer-submit-modal .customer-address-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:9px;
  width:100%;
}
.customer-submit-modal .customer-address-search{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  margin:0;
  padding:0 14px;
  border:1px solid #2f7cff;
  border-radius:9px;
  background:#2f7cff;
  color:#fff;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.customer-submit-modal .customer-address-search:hover{background:#236de4}
.customer-submit-modal .customer-address-search:active{transform:translateY(1px)}
.customer-submit-modal .customer-contact-grid .is-wide>input+input{margin-top:8px}
.customer-submit-modal .customer-contact-error{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid #ffd0d0;
  border-radius:9px;
  background:#fff4f4;
  color:#bf3434;
  font-size:12px;
  line-height:1.45;
}
.customer-submit-modal .customer-submit-actions{
  position:sticky;
  bottom:-30px;
  z-index:2;
  margin:20px -30px -30px;
  padding:16px 30px 22px;
  border-top:1px solid #edf0f4;
  background:linear-gradient(to bottom,rgba(255,255,255,.96),#fff 24%);
}
@media(max-width:600px){
  .customer-submit-modal{padding:10px}
  .customer-submit-modal .customer-submit-dialog{padding:22px 18px;border-radius:16px}
  .customer-submit-modal .customer-contact-grid{grid-template-columns:1fr}
  .customer-submit-modal .customer-contact-grid label.is-wide{grid-column:auto}
  .customer-submit-modal .customer-submit-actions{bottom:-22px;margin:18px -18px -22px;padding:14px 18px 18px}
}

/* USER MODE V1: 관리자 전용 UI만 숨기고 편집 엔진은 그대로 유지 */
.user-mode .admin-only{display:none!important}
.user-mode .panel-tabs{grid-template-columns:repeat(3,1fr)}
.user-mode .panel-tabs [data-panel="textPanel"],
.user-mode .panel-tabs [data-panel="imagePanel"],
.user-mode .panel-tabs [data-panel="layerPanel"]{display:block}
.user-mode .toolbox .tool[data-tool="guide"]{display:flex}
.user-mode .context{padding-right:12px}


/* USER MODE V2: 상단 동작 단순화 + 시안접수 준비상태 */
.user-mode #modeSwitch{display:none!important}
.user-mode .title-actions{gap:8px}
.user-mode #submitJobBtn{
  min-width:78px;
  border-color:#4a5563;
  background:#202733;
  color:#e5eaf0;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease;
}
.user-mode #submitJobBtn.submit-ready{
  border-color:#ff5b5b;
  background:#ef3e36;
  color:#fff;
  font-weight:800;
  box-shadow:0 0 0 1px rgba(255,112,105,.32),0 0 15px rgba(239,62,54,.52);
}
.user-mode #submitJobBtn.submit-ready:hover{background:#dc342e;transform:translateY(-1px)}
.user-mode #fullscreenBtn{display:inline-flex!important}

/* CanvasD work control buttons */
.title-actions .work-control-btn{background:#2b313a;color:#dce3ec;border-color:#4b5563}
.title-actions .work-control-btn:hover{background:#39414c;border-color:#657184;color:#fff}
.user-mode #resetWorkBtn,.user-mode #newProjectTopBtn{display:inline-flex!important;align-items:center;justify-content:center}
@media(max-width:1100px){.title-actions #resetWorkBtn,.title-actions #newProjectTopBtn{padding:5px 7px;font-size:12px}}


/* CanvasD text brand UI - preserves the original header layout */
.title>.canvasd-brand-name{display:block;color:#fff;font-size:16px;font-weight:800;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.title>.canvasd-brand-subtitle{display:block!important;margin-left:-5px;color:#8f9aaa;font-size:9px;line-height:1;letter-spacing:.45px;white-space:nowrap;overflow:visible;text-overflow:clip}
.empty-canvas-brand{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:min(46%,380px);text-align:center;pointer-events:none;user-select:none;opacity:.11;color:#202630}
.empty-canvas-brand.hidden{display:none!important}
.empty-canvas-brand strong{display:block;font-size:42px;font-weight:800;line-height:1;letter-spacing:-.055em}
.empty-canvas-brand span{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:1.15px}
.empty-canvas-brand p{margin:22px 0 0;color:inherit;font-size:14px;line-height:1.65;font-weight:600;letter-spacing:-.02em}
@media(max-width:900px){.title>.canvasd-brand-subtitle{display:none!important}.empty-canvas-brand{width:min(62%,320px)}.empty-canvas-brand strong{font-size:34px}.empty-canvas-brand span{font-size:11px}.empty-canvas-brand p{font-size:13px}}

/* 2026-08-07 Item Studio 새 아이템 배경 선택 UX */
.manual-item-wizard{width:min(500px,100%)}
.manual-bg-picker{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:stretch;margin:14px 0}
.manual-bg-preview{min-height:128px;border:1px dashed #596575;border-radius:8px;background:#171c22;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#7f8a99;font-size:12px;text-align:center;padding:8px}
.manual-bg-preview img{width:100%;height:100%;max-height:150px;object-fit:contain;display:block}
.manual-bg-actions{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;min-width:0}
.manual-bg-actions strong{color:#f4f7fb;font-size:14px}
.manual-bg-actions small{color:#98a3b2;line-height:1.4}
.manual-bg-actions .btn{width:100%;margin-top:2px}
.manual-bg-filename{display:block;max-width:100%;color:#9fc0ff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.manual-bg-picker{grid-template-columns:1fr}.manual-bg-preview{min-height:110px}}

/* 2026-08-07 새 아이템 배경 파일 입력 중복 노출 방지 */
#manualBgInput{display:none!important;width:0!important;height:0!important;position:absolute!important;opacity:0!important;pointer-events:none!important}

/* 2026-08-07 · Customer submit confirm compact UI */
@media (min-width:701px){
  .customer-submit-modal{padding:18px;background:rgba(18,23,31,.58)}
  .customer-submit-modal .customer-submit-dialog{
    width:min(720px,calc(100vw - 36px));max-height:none;overflow:visible;
    padding:24px 28px 22px;border-radius:0;background:#f5f5f5;
    box-shadow:0 20px 60px rgba(0,0,0,.28);font-family:Pretendard,"Noto Sans KR",sans-serif;
  }
  .customer-submit-modal .customer-submit-close{top:10px;right:14px;font-size:26px}
  .customer-submit-modal .customer-submit-icon{width:32px;height:32px;margin:0 0 8px;border-radius:0;font-size:20px;background:#e9f5ee}
  .customer-submit-modal .customer-submit-dialog h2{font-size:21px;margin:0 0 3px;line-height:1.3}
  .customer-submit-modal .customer-submit-lead{margin:0 0 13px;font-size:12px}
  .customer-submit-modal .customer-submit-summary{
    display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #dfe3e8;border-radius:0;background:#fff;overflow:hidden;
  }
  .customer-submit-modal .customer-submit-summary>div{
    min-width:0;padding:8px 12px;border:0;border-right:1px solid #e7eaee;align-items:center;
  }
  .customer-submit-modal .customer-submit-summary>div:last-child{border-right:0}
  .customer-submit-modal .customer-submit-summary span{font-size:11px;color:#7a8491}
  .customer-submit-modal .customer-submit-summary b{font-size:12px;white-space:nowrap}
  .customer-submit-modal .customer-submit-warning{margin-top:8px;padding:7px 10px;border-radius:0}
  .customer-submit-modal .customer-contact-section{margin-top:12px;padding:14px 16px;border-radius:0;background:#f7f7f7}
  .customer-submit-modal .customer-contact-head{margin:0 0 11px;padding-bottom:9px}
  .customer-submit-modal .customer-contact-head b{font-size:15px}
  .customer-submit-modal .customer-contact-head span{margin-top:2px;font-size:11px}
  .customer-submit-modal .customer-contact-grid{gap:10px 10px}
  .customer-submit-modal .customer-contact-grid label{gap:5px}
  .customer-submit-modal .customer-contact-grid label>span{font-size:12px}
  .customer-submit-modal .customer-contact-grid input{height:38px;line-height:38px;padding:0 11px;border-radius:0;font-size:13px}
  .customer-submit-modal .customer-address-row{grid-template-columns:minmax(0,1fr) 94px;gap:7px}
  .customer-submit-modal .customer-address-search{height:38px;border-radius:0;padding:0 10px;font-size:12px}
  .customer-submit-modal .customer-contact-grid .is-wide>input+input{margin-top:6px}
  .customer-submit-modal .customer-contact-error{margin-top:8px;padding:7px 9px;border-radius:0}
  .customer-submit-modal .customer-submit-actions{
    position:static;margin:12px 0 0;padding:0;border-top:0;background:none;gap:8px;
  }
  .customer-submit-modal .customer-submit-actions button{height:40px;border-radius:0;font-size:13px}
}

/* 2026-08-07 · Customer submit confirm compact UI FIX2
   Desktop modal: compact, square inputs, no internal vertical scroll. */
.customer-submit-modal{
  padding:14px;
  background:rgba(18,23,31,.56);
}
.customer-submit-modal .customer-submit-dialog{
  width:min(760px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:hidden;
  padding:18px 22px 18px;
  border-radius:0;
  background:#f5f5f5;
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  font-family:Pretendard,"Noto Sans KR",sans-serif;
}
.customer-submit-modal .customer-submit-close{
  top:8px;right:12px;font-size:24px;line-height:1;
}
.customer-submit-modal .customer-submit-icon{
  position:absolute;left:22px;top:17px;
  width:28px;height:28px;margin:0;border-radius:0;
  font-size:18px;background:#e9f5ee;
}
.customer-submit-modal .customer-submit-dialog h2{
  margin:0 0 2px 40px;font-size:20px;line-height:1.25;
}
.customer-submit-modal .customer-submit-lead{
  margin:0 0 10px 40px;font-size:11px;line-height:1.35;color:#7a8491;
}
.customer-submit-modal .customer-submit-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #dfe3e8;
  border-radius:0;
  background:#fff;
  overflow:hidden;
}
.customer-submit-modal .customer-submit-summary>div{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:0;padding:7px 10px;border:0;border-right:1px solid #e7eaee;
}
.customer-submit-modal .customer-submit-summary>div:last-child{border-right:0}
.customer-submit-modal .customer-submit-summary span{font-size:11px;color:#7a8491;white-space:nowrap}
.customer-submit-modal .customer-submit-summary b{font-size:12px;color:#253041;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-submit-modal .customer-submit-warning{margin-top:6px;padding:6px 9px;border-radius:0;font-size:11px}
.customer-submit-modal .customer-contact-section{
  margin-top:9px;padding:11px 13px 12px;
  border:1px solid #dfe3e8;border-radius:0;background:#f7f7f7;
}
.customer-submit-modal .customer-contact-head{
  margin:0 0 8px;padding:0 0 7px;border-bottom:1px solid #e3e6ea;
}
.customer-submit-modal .customer-contact-head b{font-size:14px;line-height:1.25}
.customer-submit-modal .customer-contact-head span{margin-top:2px;font-size:10px;line-height:1.3;color:#7a8491}
.customer-submit-modal .customer-contact-grid{grid-template-columns:1fr 1fr;gap:7px 10px}
.customer-submit-modal .customer-contact-grid label{gap:4px;margin:0}
.customer-submit-modal .customer-contact-grid label>span{font-size:11px;line-height:1.2}
.customer-submit-modal .customer-contact-grid em,
.customer-submit-modal .customer-contact-grid small{font-size:10px}
.customer-submit-modal .customer-contact-grid input{
  height:34px;line-height:34px;padding:0 10px;
  border:1px solid #cfd5dc;border-radius:0;background:#fff;
  font-size:12px;box-shadow:none;
}
.customer-submit-modal .customer-contact-grid input:focus{border-color:#7d9fce;box-shadow:none}
.customer-submit-modal .customer-contact-grid input[readonly]{background:#f1f3f5}
.customer-submit-modal .customer-address-row{grid-template-columns:minmax(0,1fr) 88px;gap:6px}
.customer-submit-modal .customer-address-search{
  height:34px;padding:0 8px;border-radius:0;font-size:11px;
}
.customer-submit-modal .customer-contact-grid .is-wide>input+input{margin-top:4px}
.customer-submit-modal .customer-contact-error{margin-top:6px;padding:6px 8px;border-radius:0;font-size:11px}
.customer-submit-modal .customer-submit-actions{
  position:static;display:flex;gap:8px;
  margin:9px 0 0;padding:0;border:0;background:none;
}
.customer-submit-modal .customer-submit-actions button{
  height:36px;border-radius:0;font-size:12px;
}

@media(max-width:600px){
  .customer-submit-modal{padding:8px}
  .customer-submit-modal .customer-submit-dialog{
    width:100%;max-height:calc(100vh - 16px);overflow:auto;padding:18px 14px 14px;
  }
  .customer-submit-modal .customer-submit-icon{left:14px;top:17px}
  .customer-submit-modal .customer-submit-dialog h2,
  .customer-submit-modal .customer-submit-lead{margin-left:38px}
  .customer-submit-modal .customer-submit-summary{grid-template-columns:1fr 1fr 1fr}
  .customer-submit-modal .customer-submit-summary>div{padding:6px 7px;display:block}
  .customer-submit-modal .customer-submit-summary span,
  .customer-submit-modal .customer-submit-summary b{display:block}
  .customer-submit-modal .customer-contact-grid{grid-template-columns:1fr}
  .customer-submit-modal .customer-contact-grid label.is-wide{grid-column:auto}
}

/* 2026-08-07 · Customer submit confirm MEMBER-FORM FINAL
   실제 운영 모달: 회원가입 폼처럼 한 항목 한 줄, 가로형, 내부 스크롤 없음 */
@media (min-width:701px){
  .customer-submit-modal .customer-submit-dialog{
    width:min(900px,calc(100vw - 40px));
    max-height:calc(100vh - 32px);
    overflow:hidden;
    padding:20px 24px 18px;
    border-radius:0;
    background:#f5f5f5;
  }
  .customer-submit-modal .customer-submit-icon{left:24px;top:19px;width:28px;height:28px}
  .customer-submit-modal .customer-submit-dialog h2{margin:0 0 1px 40px;font-size:19px}
  .customer-submit-modal .customer-submit-lead{margin:0 0 10px 40px;font-size:11px}
  .customer-submit-modal .customer-submit-summary{margin-bottom:9px}
  .customer-submit-modal .customer-submit-summary>div{padding:6px 10px}

  .customer-submit-modal .customer-contact-section{margin:0;padding:0;border:1px solid #d9dee5;background:#fff}
  .customer-submit-modal .customer-contact-head{margin:0;padding:10px 14px;border-bottom:1px solid #dfe3e8;background:#f5f5f5}
  .customer-submit-modal .customer-contact-head b{font-size:14px}
  .customer-submit-modal .customer-contact-head span{margin-top:2px;font-size:10px}

  .customer-submit-modal .customer-contact-grid{display:block}
  .customer-submit-modal .customer-contact-grid label{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    align-items:center;
    gap:0;
    min-height:48px;
    margin:0;
    border-bottom:1px solid #e1e5ea;
  }
  .customer-submit-modal .customer-contact-grid label:last-child{border-bottom:0}
  .customer-submit-modal .customer-contact-grid label>span{
    align-self:stretch;
    display:flex;
    align-items:center;
    gap:4px;
    padding:0 14px;
    border-right:1px solid #e1e5ea;
    background:#f5f5f5;
    font-size:12px;
  }
  .customer-submit-modal .customer-contact-grid label>input,
  .customer-submit-modal .customer-contact-grid label>.customer-address-row{
    margin:7px 12px;
  }
  .customer-submit-modal .customer-contact-grid input{
    height:34px;line-height:34px;border-radius:0;font-size:12px;
  }
  .customer-submit-modal .customer-contact-grid .is-wide>input+input{margin-top:0}
  .customer-submit-modal .customer-address-row{grid-template-columns:minmax(0,1fr) 88px;gap:6px;width:auto}
  .customer-submit-modal .customer-address-search{height:34px;border-radius:0}

  /* 주소는 회원가입 양식처럼 한 묶음 안에 3줄로 정렬 */
  .customer-submit-modal .customer-contact-grid label.is-wide:has(.customer-address-row){
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    padding-bottom:7px;
  }
  .customer-submit-modal .customer-contact-grid label.is-wide:has(.customer-address-row)>span{
    grid-row:1/4;
  }
  .customer-submit-modal .customer-contact-grid label.is-wide:has(.customer-address-row)>.customer-address-row{
    grid-column:2;grid-row:1;margin:7px 12px 3px;
  }
  .customer-submit-modal .customer-contact-grid label.is-wide:has(.customer-address-row)>input{
    grid-column:2;margin:3px 12px;
  }
  .customer-submit-modal .customer-contact-grid label.is-wide:has(.customer-address-row)>input:last-child{margin-bottom:0}

  .customer-submit-modal .customer-submit-actions{margin-top:9px;gap:8px}
  .customer-submit-modal .customer-submit-actions button{height:38px;border-radius:0}
}
\n\n/* CanvasD Elements Library v1 */\n.elements-library{padding:12px!important}\n.elements-search-wrap{position:relative;margin-bottom:10px}\n.elements-search-wrap input{width:100%;height:38px;padding:0 36px 0 12px;border:1px solid #5a6573;border-radius:7px;background:#232b36;color:#eef3f8;font-size:12px;outline:none}\n.elements-search-wrap input:focus{border-color:#27b9c3;box-shadow:0 0 0 2px rgba(39,185,195,.12)}\n.elements-search-wrap button{position:absolute;right:6px;top:5px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#9da8b5;font-size:18px;cursor:pointer}\n.elements-category-tabs{display:flex;gap:6px;margin:0 0 12px;overflow:auto}\n.elements-category-tabs button{flex:0 0 auto;min-width:48px;height:30px;padding:0 10px;border:1px solid #4d5865;border-radius:15px;background:#29323e;color:#cbd3dc;font-size:11px;cursor:pointer}\n.elements-category-tabs button.active{border-color:#35c3ca;background:#153b40;color:#eaffff}\n.elements-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n.elements-item{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid #414c59;border-radius:7px;background:#f5f6f8;cursor:pointer;overflow:hidden}\n.elements-item:hover{border-color:#35c3ca;box-shadow:0 0 0 1px rgba(53,195,202,.25)}\n.elements-item img{display:block;max-width:72%;max-height:72%;pointer-events:none}\n.elements-item span{position:absolute;left:5px;right:5px;bottom:4px;padding:2px 4px;border-radius:3px;background:rgba(20,26,34,.72);color:#fff;font-size:9px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s}\n.elements-item:hover span{opacity:1}\n.elements-empty{padding:28px 8px;text-align:center;color:#8f99a5;font-size:11px}\n.elements-help{display:block;margin-top:10px;color:#8d98a5;line-height:1.45}\n.user-mode #elementsPanel .elements-library{padding:10px!important}\n.user-mode .elements-grid{grid-template-columns:repeat(3,minmax(0,1fr))}\n
/* CanvasD Elements Library v1.2 */
.elements-library-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 9px;color:#cbd4de;font-size:11px}
.elements-library-head b{color:#55d0d6;font-weight:700}
.elements-category-tabs{padding-bottom:2px;scrollbar-width:thin}
.elements-category-tabs button{min-width:auto;padding:0 11px}
.elements-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.elements-item{min-width:0;border-radius:6px}
.elements-item img{max-width:76%;max-height:76%}
.user-mode .elements-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.elements-grid,.user-mode .elements-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* CanvasD Elements v1.3: element assets must preserve alpha transparency */
.object.image.element-asset .image-mask{background:transparent !important}
.object.image.element-asset .image-mask>img{background:transparent !important}
.elements-item img{background:transparent !important}

/* 2026-08-13 Item Studio manual background aspect workspace */
.manual-item-wizard .manual-aspect-lock{
 display:flex;align-items:center;gap:7px;margin:9px 0 3px;color:#c8d0dc;font-size:12px;font-weight:400
}
.manual-item-wizard .manual-aspect-lock input{
 display:inline-block;width:15px;height:15px;margin:0;accent-color:#2f7cff
}
.manual-item-wizard .manual-aspect-lock small{
 margin-left:2px;color:#8995a5;font-size:10px;font-weight:400
}

/* 2026-08-13 Stage 34: zoom tool Alt cursor feedback */
html.zoom-out-mode .app:has(.tool[data-tool="zoom"].active) .workspace,
html.zoom-out-mode .app:has(.tool[data-tool="zoom"].active) .artboard{
  cursor:zoom-out;
}

/* 2026-08-13 Stage 36
   Item background follows the transform box exactly.
   Free corner/side resize can intentionally distort the source image.
   Shift + corner resize is handled by JS and therefore stays proportional. */
.product-bg.has-image{
  background-size:100% 100%!important;
}


/* Stage47 · Submit profile order-confirm UI */
.customer-submit-order{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;padding:10px;border:1px solid #dfe4ea;background:#f8f9fb}.customer-submit-order>div{display:flex;justify-content:space-between;gap:12px;font-size:12px}.customer-submit-order span{color:#68717e}.customer-submit-order b{font-weight:600;text-align:right}.customer-submit-final-check{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:11px 12px;border:1px solid #dfe4ea;background:#fafbfc;font-size:12px;line-height:1.45}.customer-submit-final-check input{margin-top:2px}.customer-submit-summary.hidden,.customer-submit-order.hidden,.customer-submit-final-check.hidden{display:none!important}
@media(max-width:680px){.customer-submit-order{grid-template-columns:1fr}}

/* CanvasD PATCH 2026-08-14: customer single-face inactive side visibility
   Visual-only. Does not change print-area policy, objects, preview, render or submit data. */
.customer-studio .area.product-inactive,
.user-mode .area.product-inactive {
  opacity: 1;
  filter: grayscale(1);
  background: rgba(92, 99, 108, .20);
  border-color: #9aa1aa;
  pointer-events: none;
}
.customer-studio .area.product-inactive .tag,
.user-mode .area.product-inactive .tag {
  background: rgba(65, 70, 77, .88);
  color: #d9dde2;
}
.customer-studio .area.product-inactive .tag:after,
.user-mode .area.product-inactive .tag:after {
  color: #d9dde2;
}

/* CanvasD 3D final UI cleanup 2026-08-17 */
.preview3d-shell,.preview3d-head-actions button,.preview3d-view-buttons button,.preview3d-refresh,.preview3d-panel select,.preview3d-badge,.preview3d-drag-note{border-radius:0!important}
.preview3d-panel{padding:16px!important}
.preview3d-panel #preview3dCapture{margin-top:14px!important;height:40px}
.preview3d-view-buttons{margin-top:0!important}

/* 종이 그림용 배경 깨끗하게 */
.background-clean-action{border-color:#3b8d75!important;background:#1d3b33!important;color:#dff8ee!important}
.background-clean-action:hover{background:#245044!important}
.photo-workspace-clean{margin-top:14px;padding-top:14px;border-top:1px solid #343c47}
.photo-workspace-clean .clean-main{width:100%;height:36px;border:1px solid #3b8d75;border-radius:5px;background:#1f4b3e;color:#e5fff6;font-weight:700;cursor:pointer}
.photo-workspace-clean .clean-main:hover{background:#28614f}
.photo-workspace-clean .clean-levels{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:5px;margin-top:7px}
.photo-workspace-clean .clean-levels button{height:29px;border:1px solid #46515f;border-radius:4px;background:#252c35;color:#aeb8c5;font-size:10px;cursor:pointer}
.photo-workspace-clean .clean-levels button.active{border-color:#3b8d75;background:#24493e;color:#e8fff8}
.photo-workspace-clean small{display:block;margin-top:7px;color:#7f8b99;font-size:9px;line-height:1.45}
.photo-workspace-backdrop.is-processing .photo-workspace-shell{pointer-events:none;opacity:.78}

/* 2026-08-17: editor-only item background visibility toggle */
.title-actions .item-bg-visibility-toggle{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:1px solid #46505d;border-radius:5px;background:#202630;color:#cfd7e2;white-space:nowrap;cursor:pointer;user-select:none}
.title-actions .item-bg-visibility-toggle:hover{background:#2b333e;border-color:#5a6675;color:#fff}
.title-actions .item-bg-visibility-toggle input{width:15px;height:15px;margin:0;accent-color:#2f7cff;cursor:pointer}
.title-actions .item-bg-visibility-toggle span{color:inherit;font-size:12px}
@media(max-width:1100px){.title-actions .item-bg-visibility-toggle{padding:0 6px}.title-actions .item-bg-visibility-toggle span{font-size:11px}}

/* CanvasD editor manual v1 - Illustrator-like fixed window */
#helpModal .help-modal{width:min(1120px,calc(100vw - 64px));height:min(780px,calc(100vh - 64px));border-radius:0;grid-template-rows:auto auto 1fr auto;background:#20262e}
#helpModal .help-modal-header{padding:14px 18px 12px;background:#1b2027}
#helpModal .help-modal-header h2{font-size:18px;font-weight:500}
#helpModal .help-modal-eyebrow{font-weight:400}
#helpModal .help-modal-close{width:32px;height:32px;border-radius:0;background:#252c35;font-size:21px}
#helpModal .help-modal-tabs{gap:0;padding:0 18px;background:#1b2027;border-bottom:1px solid #394452}
#helpModal .help-modal-tabs button{padding:10px 14px;font-weight:500}
#helpModal .help-modal-body{overflow:hidden;padding:0;min-height:0}
#helpModal .help-view{height:100%;min-height:0}
#helpModal .help-view[data-help-view="shortcuts"]{overflow:auto;padding:18px}
#helpModal .help-shortcut-grid section{border-radius:0}
#helpModal .help-modal-footer{padding:9px 14px;background:#1b2027}
#helpModal .help-modal-footer .btn{border-radius:0}
.guide-jump-nav{height:43px;display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;padding:0 10px;border-bottom:1px solid #3a444f;background:#252b33;scrollbar-width:thin}
.guide-jump-nav button{flex:0 0 auto;padding:0 12px;border:0;border-right:1px solid #343d48;background:transparent;color:#c3cbd5;font-size:12px;font-weight:400;cursor:pointer}
.guide-jump-nav button:hover,.guide-jump-nav button.active{background:#303945;color:#fff}
.guide-scroll{height:calc(100% - 43px);overflow-y:auto;scroll-behavior:smooth;padding:22px 28px 40px;background:#f2f3f5;color:#262b31;scrollbar-color:#89929d #d9dde1}
.guide-manual-head{padding:0 0 20px;border-bottom:1px solid #c9cdd2}
.guide-manual-head h3{margin:0 0 7px;font-size:22px;font-weight:500;color:#20252b}
.guide-manual-head p{margin:0;color:#69717a;font-size:13px;line-height:1.65}
.guide-flow{margin-top:15px;padding:11px 13px;border:1px solid #c4c9cf;background:#e7e9ec;color:#424950;font-size:13px}
.guide-section{scroll-margin-top:14px;padding:24px 2px;border-bottom:1px solid #d0d4d8}
.guide-section h4{margin:0 0 11px;font-size:16px;font-weight:500;color:#20252b}
.guide-section p{max-width:900px;margin:0 0 9px;color:#4f5760;font-size:13px;line-height:1.85}
.guide-section p:last-child{margin-bottom:0}.guide-section strong{font-weight:600;color:#242a30}
.guide-final-note{margin-top:14px;padding:13px 15px;border-left:3px solid #377fd0;background:#e7ebef;color:#39414a;font-size:13px;line-height:1.7}
@media(max-width:760px){#helpModal .help-modal{width:100%;height:100%;border-radius:0}.guide-scroll{padding:18px 16px 32px}.guide-jump-nav button{padding:0 10px}}


/* DESIGNBOX CUSTOMER STATUS BAR - PATCH 42 */
#statusContact{display:none}

.user-mode .status{
  display:flex;
  align-items:center;
  gap:0;
  background:#1b2027 !important;
  color:#ffffff !important;
  border-top:1px solid #373e48 !important;
}
.user-mode #templateStatus{
  order:1;
  flex:0 0 auto;
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  font-weight:700;
  color:#ffffff !important;
}
.user-mode #statusHistory{
  order:2;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  margin-left:22px;
  padding-left:22px;
  border-left:4px solid #ffffff !important;
  white-space:nowrap;
  color:#ffffff !important;
}
.user-mode #statusSnap{
  order:3;
  display:inline;
  flex:0 0 auto;
  margin-left:8px;
  white-space:nowrap;
  color:#ffffff !important;
}
.user-mode #statusSnap::before{content:"· ";}
.user-mode #statusZoom{
  order:4;
  display:inline;
  flex:0 0 auto;
  margin-left:8px;
  white-space:nowrap;
  color:#ffffff !important;
}
.user-mode #statusZoom::before{content:"· ";}
.user-mode #statusMessage{
  order:5;
  flex:1 1 auto;
  min-width:120px;
  margin:0 18px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ffffff !important;
}
.user-mode #statusContact{
  order:6;
  display:inline;
  flex:0 0 auto;
  margin-left:auto;
  padding-left:16px;
  white-space:nowrap;
  color:#ffffff !important;
  font-weight:400;
}
@media(max-width:1280px){
  .user-mode #statusHistory{margin-left:16px;padding-left:16px}
  .user-mode #statusMessage{margin:0 10px}
  .user-mode #statusContact{font-size:10px}
}


/* =========================================================
   PRINT AREA CORNER HANDLES - PATCH 54
   Four Illustrator-style corner resize handles
   ========================================================= */
.area-handle.nw{left:-7px;top:-7px;cursor:nwse-resize}
.area-handle.ne{right:-7px;top:-7px;cursor:nesw-resize}
.area-handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.area-handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize}

/* PATCH 074 · 주문완료 후 시안접수 확인형 */
.customer-submit-order-summary{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #dfe4ea;background:#f8fafb;margin:10px 0 14px}.customer-submit-order-summary>div{display:flex;justify-content:space-between;gap:14px;padding:9px 11px;border-bottom:1px solid #e8ebef;font-size:12px}.customer-submit-order-summary>div:nth-last-child(-n+2){border-bottom:0}.customer-submit-order-summary span{color:#6d7580}.customer-submit-order-summary b{color:#222;text-align:right;font-weight:600}@media(max-width:640px){.customer-submit-order-summary{grid-template-columns:1fr}.customer-submit-order-summary>div{border-bottom:1px solid #e8ebef!important}.customer-submit-order-summary>div:last-child{border-bottom:0!important}}

/* 2026-08-24: prominent device bridge actions beside Zoom */
.device-bridge-actions{display:flex;align-items:center;gap:7px;margin-right:12px}
.device-bridge-btn{height:32px;padding:0 14px;border:1px solid #15965f;background:#16a56a;color:#fff;font:700 12px/1 Pretendard,Arial,sans-serif;cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.device-bridge-btn:hover{background:#118c59;border-color:#118c59}
.device-bridge-btn:focus-visible{outline:2px solid #7de0b5;outline-offset:2px}
@media(max-width:1050px){.device-bridge-btn{padding:0 9px;font-size:11px}.device-bridge-actions{gap:5px;margin-right:7px}}

/* Education P8 · submit confirmation artwork preview */
.customer-submit-modal .education-submit-preview.hidden{display:none}
.customer-submit-modal .education-submit-preview{margin-top:14px;border:1px solid #dfe5ea;background:#f6f8f9}
.customer-submit-modal .education-submit-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid #e1e6ea;background:#fff}
.customer-submit-modal .education-submit-preview-head strong{font-size:12px;color:#253441}
.customer-submit-modal .education-submit-preview-head span{font-size:10px;color:#88949d}
.customer-submit-modal .education-submit-preview-body{min-height:150px;display:grid;place-items:center;padding:8px;color:#87939d;font-size:11px;text-align:center}
.customer-submit-modal .education-submit-preview-body img{display:block;width:100%;max-height:360px;object-fit:contain;background:#fff}
.customer-submit-modal .education-submit-preview-body .is-error{line-height:1.6;color:#9c6e6e}
.customer-submit-modal:has(.education-submit-preview:not(.hidden)) .customer-submit-dialog{width:min(720px,100%)}
@media(max-width:760px){.customer-submit-modal:has(.education-submit-preview:not(.hidden)) .customer-submit-dialog{width:100%}.customer-submit-modal .education-submit-preview-body img{max-height:280px}}

/* Education P18 · class schedule status */
.status .education-class-date{
  margin-left:auto!important;padding:0 9px!important;border-left:1px solid #3b4652;color:#fff!important;font-size:11px!important;font-weight:650!important;white-space:nowrap;
}
.status .education-class-clock{
  min-width:128px;padding:0 9px!important;border-left:1px solid #3b4652;color:#ff4b4b!important;
  font-family:Consolas,"Courier New",monospace!important;font-size:12px!important;font-weight:800!important;letter-spacing:.04em;white-space:nowrap;
}
.status .education-class-clock.is-ended{color:#ff7777!important}
body.education-entry .status #statusContact{margin-left:0!important}

/* P19 Education hard schedule lock */
.education-schedule-lock{position:fixed;z-index:999999;inset:0;display:grid;place-items:center;background:rgba(15,22,30,.78);backdrop-filter:blur(3px)}
.education-schedule-lock[hidden]{display:none!important}.education-schedule-lock section{width:min(440px,calc(100vw - 36px));padding:30px 32px;background:#fff;border-top:4px solid #2d7de2;box-shadow:0 24px 70px rgba(0,0,0,.34);text-align:center}
.education-schedule-lock span{display:block;color:#2d7de2;font-size:11px;font-weight:800;letter-spacing:.12em}.education-schedule-lock h2{margin:10px 0 7px;color:#182532;font-size:23px}
.education-schedule-lock p{margin:0;color:#68747f;font-size:13px;line-height:1.6}.education-schedule-lock strong{display:block;margin:17px 0 13px;color:#e33535;font-family:Consolas,"Courier New",monospace;font-size:26px;letter-spacing:.04em}
.education-schedule-lock small{color:#8a949d;font-size:11px}body.education-schedule-locked .app{pointer-events:none;user-select:none}

/* Education P20 · class date/timer moved to top context */
.education-entry .context .education-top-schedule{
  display:flex;align-items:center;gap:10px;margin-left:auto;margin-right:12px;
  min-height:30px;padding:0 11px;border-left:1px solid #3b4652;border-right:1px solid #3b4652;
  background:#202934;white-space:nowrap;
}
.education-entry .education-top-date{
  color:#fff;font-size:12px;font-weight:750;letter-spacing:-.01em;
}
.education-entry .education-top-clock{
  min-width:150px;color:#ff4b4b;font-family:Consolas,"Courier New",monospace;
  font-size:13px;font-weight:850;letter-spacing:.035em;
}
.education-entry .education-top-clock.is-ended{color:#ff7474}
.education-entry footer.status .education-class-date,
.education-entry footer.status .education-class-clock{display:none!important}
@media(max-width:1100px){
  .education-entry .context .education-top-schedule{gap:7px;margin-right:7px;padding:0 7px}
  .education-entry .education-top-date{font-size:10px}
  .education-entry .education-top-clock{min-width:125px;font-size:11px}
}


/* CanvasD Mugnara workspace grid background - matched from operating source
   Fine, low-contrast 10px grid. Item background images sit on an opaque backing
   layer so the grid is visible only behind the item/background image. */
.artboard{
  background-color:#fafbfc;
  background-image:
    linear-gradient(to right, rgba(116,129,145,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(116,129,145,.075) 1px, transparent 1px);
  background-size:10px 10px;
  background-position:0 0;
}
.product-bg-grid-mask{
  position:absolute;
  z-index:.5;
  pointer-events:none;
  background:#fff;
}

/* P54 Education large pre-submit review */
#customerSubmitModal.education-review-mode{padding:18px!important;background:rgba(18,22,28,.74)!important}
#customerSubmitModal.education-review-mode .customer-submit-dialog{width:min(920px,calc(100vw - 36px))!important;max-height:calc(100vh - 36px)!important;padding:0!important;border-radius:0!important;overflow:auto!important;background:#fff!important;color:#202833!important}
#customerSubmitModal.education-review-mode .customer-submit-close{top:14px!important;right:14px!important;z-index:3!important;background:#f1f3f5!important;color:#65717b!important}
#customerSubmitModal .education-final-review{background:#fff}
#customerSubmitModal .education-final-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:34px 38px 26px;border-top:3px solid #2f7be5;border-bottom:1px solid #e2e7eb}
#customerSubmitModal .education-final-org{margin-bottom:7px;color:#e24b42;font-size:9px;font-weight:700}
#customerSubmitModal .education-final-head h2{margin:0 0 6px!important;font-size:29px!important;line-height:1.2!important;color:#1f2933!important}
#customerSubmitModal .education-final-head p{margin:0!important;color:#6b7883!important;font-size:11px!important}
#customerSubmitModal .education-final-head>span{padding:8px 13px;background:#fff4df;color:#a96b14;font-size:10px;font-weight:700}
#customerSubmitModal .education-final-info{display:grid;grid-template-columns:1.5fr 1fr .7fr;background:#f8fafb;border-bottom:1px solid #e2e7eb}
#customerSubmitModal .education-final-info>div{min-width:0;padding:14px 18px;border-right:1px solid #e2e7eb}
#customerSubmitModal .education-final-info>div:last-child{border-right:0}
#customerSubmitModal .education-final-info small,#customerSubmitModal .education-final-info strong{display:block}
#customerSubmitModal .education-final-info small{margin-bottom:5px;color:#8a959e;font-size:9px}
#customerSubmitModal .education-final-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#34424d;font-size:11px}
#customerSubmitModal .education-final-preview{padding:27px 38px 8px}
#customerSubmitModal .education-final-preview-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px}
#customerSubmitModal .education-final-preview-title strong{font-size:17px;color:#1f2933}
#customerSubmitModal .education-final-preview-title span{color:#8a959e;font-size:10px}
#customerSubmitModal .education-final-preview-body{display:grid;place-items:center;min-height:250px;background:#f3f5f6;border:1px solid #dde3e7}
#customerSubmitModal .education-final-preview-body img{display:block;width:100%;max-height:480px;object-fit:contain;background:#fff}
#customerSubmitModal .education-final-preview-body .is-error{padding:35px;color:#a55454;text-align:center}
#customerSubmitModal .education-final-message{margin:21px 38px 0;padding:17px 19px;background:#fffaf1;border:1px solid #f0dfbf}
#customerSubmitModal .education-final-message strong{font-size:13px;color:#684e22}
#customerSubmitModal .education-final-message p{margin:6px 0 0;color:#806c49;font-size:10px;line-height:1.65}
#customerSubmitModal .education-final-actions{display:grid;grid-template-columns:minmax(200px,.32fr) minmax(0,.68fr);gap:12px;margin:18px 38px 0}
#customerSubmitModal .education-final-actions>div{padding:12px 14px;border:1px solid #d9e3ea;background:#fafcfd}
#customerSubmitModal .education-final-actions>div strong{display:block;font-size:11px;color:#263746}
#customerSubmitModal .education-final-actions>div p{margin:4px 0 8px;color:#6e7a85;font-size:9px}
#customerSubmitModal .education-final-back{height:32px;padding:0 13px;border:1px solid #b9c7d3;background:#fff;color:#52616d;font-size:9px;font-weight:700;cursor:pointer}
#customerSubmitModal .education-final-submit{min-height:76px;border:0;background:#347fe0;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
#customerSubmitModal .education-final-submit:hover{background:#2e73cc}
#customerSubmitModal .education-final-submit:disabled{opacity:.58;cursor:wait}
#customerSubmitModal .education-final-note{margin:10px 38px 26px;text-align:center;color:#9aa3ab;font-size:8px}
@media(max-width:700px){#customerSubmitModal .education-final-head{align-items:flex-start;flex-direction:column;padding:28px 22px 22px}#customerSubmitModal .education-final-info{grid-template-columns:1fr 1fr}#customerSubmitModal .education-final-info>div:nth-child(2){border-right:0}#customerSubmitModal .education-final-info>div:last-child{grid-column:1/3;border-top:1px solid #e2e7eb}#customerSubmitModal .education-final-preview{padding:22px 22px 8px}#customerSubmitModal .education-final-preview-title{align-items:flex-start;flex-direction:column}#customerSubmitModal .education-final-message{margin:18px 22px 0}#customerSubmitModal .education-final-actions{grid-template-columns:1fr;margin:16px 22px 0}#customerSubmitModal .education-final-note{margin:10px 22px 22px}}

/* P59 Education submit review - notebook viewport compact fit */
@media (min-width:701px){
  #customerSubmitModal.education-review-mode{
    padding:12px!important;
  }
  #customerSubmitModal.education-review-mode .customer-submit-dialog{
    width:min(840px,calc(100vw - 24px))!important;
    max-height:calc(100vh - 24px)!important;
    overflow:hidden!important;
  }
  #customerSubmitModal.education-review-mode .customer-submit-close{
    top:9px!important;
    right:10px!important;
    width:30px!important;
    height:30px!important;
    font-size:21px!important;
  }
  #customerSubmitModal .education-final-head{
    gap:18px;
    padding:18px 26px 14px;
  }
  #customerSubmitModal .education-final-org{
    margin-bottom:4px;
    font-size:8px;
  }
  #customerSubmitModal .education-final-head h2{
    margin:0 0 3px!important;
    font-size:23px!important;
  }
  #customerSubmitModal .education-final-head p{
    font-size:10px!important;
  }
  #customerSubmitModal .education-final-head>span{
    padding:6px 10px;
    font-size:9px;
  }
  #customerSubmitModal .education-final-info>div{
    padding:9px 14px;
  }
  #customerSubmitModal .education-final-info small{
    margin-bottom:3px;
    font-size:8px;
  }
  #customerSubmitModal .education-final-info strong{
    font-size:10px;
  }
  #customerSubmitModal .education-final-preview{
    padding:14px 26px 5px;
  }
  #customerSubmitModal .education-final-preview-title{
    margin-bottom:7px;
  }
  #customerSubmitModal .education-final-preview-title strong{
    font-size:14px;
  }
  #customerSubmitModal .education-final-preview-title span{
    font-size:9px;
  }
  #customerSubmitModal .education-final-preview-body{
    min-height:160px;
    max-height:clamp(210px,35vh,310px);
    overflow:hidden;
  }
  #customerSubmitModal .education-final-preview-body img{
    width:100%;
    max-height:clamp(210px,35vh,310px);
    object-fit:contain;
  }
  #customerSubmitModal .education-final-message{
    margin:9px 26px 0;
    padding:10px 13px;
  }
  #customerSubmitModal .education-final-message strong{
    font-size:11px;
  }
  #customerSubmitModal .education-final-message p{
    margin:3px 0 0;
    font-size:9px;
    line-height:1.45;
  }
  #customerSubmitModal .education-final-actions{
    grid-template-columns:minmax(180px,.30fr) minmax(0,.70fr);
    gap:10px;
    margin:9px 26px 0;
  }
  #customerSubmitModal .education-final-actions>div{
    padding:8px 11px;
  }
  #customerSubmitModal .education-final-actions>div strong{
    font-size:10px;
  }
  #customerSubmitModal .education-final-actions>div p{
    margin:2px 0 5px;
    font-size:8px;
  }
  #customerSubmitModal .education-final-back{
    height:28px;
    padding:0 11px;
    font-size:8px;
  }
  #customerSubmitModal .education-final-submit{
    min-height:58px;
    font-size:13px;
  }
  #customerSubmitModal .education-final-note{
    margin:6px 26px 10px;
    font-size:7px;
  }
}

/* Smaller notebook heights: keep the whole review visible without a dialog scrollbar. */
@media (min-width:701px) and (max-height:800px){
  #customerSubmitModal .education-final-head{padding:13px 22px 10px}
  #customerSubmitModal .education-final-head h2{font-size:21px!important}
  #customerSubmitModal .education-final-info>div{padding:7px 12px}
  #customerSubmitModal .education-final-preview{padding:9px 22px 3px}
  #customerSubmitModal .education-final-preview-body,
  #customerSubmitModal .education-final-preview-body img{max-height:29vh;min-height:145px}
  #customerSubmitModal .education-final-message{margin:6px 22px 0;padding:8px 11px}
  #customerSubmitModal .education-final-actions{margin:6px 22px 0}
  #customerSubmitModal .education-final-submit{min-height:50px}
  #customerSubmitModal .education-final-note{margin:4px 22px 7px}
}


/* STEP100 · customer selectable print-area limit */
.customer-studio.dynamic-customer-area-selection .area.product-inactive,
.user-mode.dynamic-customer-area-selection .area.product-inactive,
#appRoot.dynamic-customer-area-selection .area.product-inactive {
  pointer-events:none;
  cursor:not-allowed;
}
#appRoot.dynamic-customer-area-selection .area.customer-area-chosen {
  box-shadow:0 0 0 2px rgba(49,130,246,.34) inset;
}

/* STEP106: Item Studio 관리자용 좌측 도구 단순화
   프레임/꾸미기/그리기는 고객 편집 기능으로 유지하되 Item Studio 진입 시에만 숨김. */
html.item-studio-entry .tool[data-tool="shape"],
html.item-studio-entry .tool[data-tool="elements"],
html.item-studio-entry .tool[data-tool="drawing"] {
  display: none !important;
}

/* =========================================================
   2026-09-15 · Cafe24 customer mobile responsive phase 1
   Scope: USER MODE / customer-studio only. Admin/Item Studio unchanged.
   Target: 360px-class mobile browser can add photo/text, edit basic
   properties, inspect the canvas and submit without desktop-only layout.
   ========================================================= */
@media (max-width:700px){
  html,body{width:100%;height:100%;min-width:0;overflow:hidden}
  .app.user-mode.customer-studio{
    width:100%;height:100dvh;min-width:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:40px 46px 30px minmax(170px,1fr) 150px 58px 22px;
    grid-template-areas:'title' 'menu' 'ctx' 'work' 'panel' 'tools' 'status';
  }

  /* Top brand: keep only the product identity on narrow screens. */
  .user-mode.customer-studio .title{padding:0 10px;gap:7px;min-width:0}
  .user-mode.customer-studio .title>b{font-size:13px;white-space:nowrap}
  .user-mode.customer-studio .title>span{display:none!important}
  .user-mode.customer-studio .title-actions{display:none!important}

  /* Customer workflow actions become a horizontal mobile action strip. */
  .user-mode.customer-studio .menu{
    display:flex!important;grid-area:menu;min-width:0;height:auto;
    padding:4px 6px;background:#fff;border-bottom:1px solid #dbe2e9;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;z-index:210;
  }
  .user-mode.customer-studio .menu::-webkit-scrollbar{display:none}
  .user-mode.customer-studio .customer-brand{display:none!important}
  .user-mode.customer-studio .customer-main-actions{
    width:max-content;min-width:100%;margin:0;display:flex;gap:5px;align-items:center;
  }
  .user-mode.customer-studio .customer-main-actions button{
    flex:0 0 auto;min-width:76px;height:36px;padding:0 9px;border-radius:6px;font-size:11px;
  }
  .user-mode.customer-studio .customer-main-actions button b{display:none!important}
  .user-mode.customer-studio .customer-main-actions .customer-submit{
    min-width:84px;padding:0 12px;position:sticky;right:0;box-shadow:-7px 0 10px rgba(255,255,255,.92);
  }

  /* Keep a very small status/context row. Desktop device bridges are hidden. */
  .user-mode.customer-studio .context{
    min-width:0;padding:3px 8px;gap:5px;overflow:hidden;background:#f5f7fa;
  }
  .user-mode.customer-studio .context #statusTool{
    min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;
  }
  .user-mode.customer-studio .context #statusTool:after{display:none}
  .user-mode.customer-studio .context .spacer{flex:1}
  .user-mode.customer-studio .device-bridge-actions{display:none!important}
  .user-mode.customer-studio .zoom-control{margin-left:auto;font-size:9px}
  .user-mode.customer-studio .zoom-control input{width:76px}
  .user-mode.customer-studio #zoomValue{font-size:9px;min-width:30px}

  /* Canvas gets the majority of the viewport. Rulers are hidden on phones. */
  .user-mode.customer-studio .workspace{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
  .user-mode.customer-studio .stage{
    min-width:0!important;min-height:100%!important;width:100%;
    padding:12px!important;align-items:flex-start;justify-content:center;
  }
  .user-mode.customer-studio .ruler,
  .user-mode.customer-studio .ruler-corner{display:none!important}
  .user-mode.customer-studio .artboard{transform-origin:top center}

  /* Basic properties stay reachable instead of disappearing on mobile. */
  .user-mode.customer-studio .panel{
    display:block!important;grid-area:panel;min-width:0;min-height:0;max-height:none;
    border-left:0;border-top:1px solid #d9e0e8;overflow:auto;background:#fff;
  }
  .user-mode.customer-studio #customerContextPanel{min-height:100%}
  .user-mode.customer-studio .customer-side-head{padding:8px 10px 6px}
  .user-mode.customer-studio .customer-side-head span{font-size:9px}
  .user-mode.customer-studio .customer-side-head b{font-size:14px;margin-top:1px}
  .user-mode.customer-studio .customer-side-head p,
  .user-mode.customer-studio .customer-help-card,
  .user-mode.customer-studio .customer-side-submit{display:none!important}
  .user-mode.customer-studio .customer-step-list{
    grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px;
  }
  .user-mode.customer-studio .customer-step-list button{
    min-width:0;display:block;padding:6px 4px;text-align:center;border-radius:6px;
  }
  .user-mode.customer-studio .customer-step-list i{
    width:22px;height:22px;margin:0 auto 3px;font-size:10px;
  }
  .user-mode.customer-studio .customer-step-list span{display:block;min-width:0}
  .user-mode.customer-studio .customer-step-list b{font-size:10px;white-space:nowrap}
  .user-mode.customer-studio .customer-step-list small{display:none}
  .user-mode.customer-studio .customer-context-card{padding:8px 10px}
  .user-mode.customer-studio .customer-context-card h3{font-size:14px;margin:0 0 4px}
  .user-mode.customer-studio .customer-context-card h4{font-size:10px;margin:7px 0 4px}
  .user-mode.customer-studio .customer-context-card p{margin:0 0 5px;font-size:10px}
  .user-mode.customer-studio .customer-field{margin:4px 0}
  .user-mode.customer-studio .customer-field>span{font-size:9px}
  .user-mode.customer-studio .customer-field textarea{min-height:44px;max-height:54px}
  .user-mode.customer-studio .frame-preset-grid,
  .user-mode.customer-studio .image-action-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .user-mode.customer-studio .frame-preset-grid button,
  .user-mode.customer-studio .image-action-grid button{min-width:0;padding:5px 2px;font-size:9px}

  /* Main tools stay as a thumb-friendly bottom bar. */
  .user-mode.customer-studio .toolbox{
    grid-area:tools;display:flex!important;align-items:center;gap:4px;
    padding:4px 5px;border-right:0;border-top:1px solid #d9e0e8;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:#f8fafc;
  }
  .user-mode.customer-studio .toolbox::-webkit-scrollbar{display:none}
  .user-mode.customer-studio .toolbox .tool,
  .user-mode.customer-studio .toolbox .tool[data-tool="select"],
  .user-mode.customer-studio .toolbox .tool[data-tool="hand"],
  .user-mode.customer-studio .toolbox .tool[data-tool="zoom"],
  .user-mode.customer-studio .toolbox .tool[data-tool="guide"],
  .user-mode.customer-studio .toolbox .tool[data-tool="text"],
  .user-mode.customer-studio .toolbox .tool[data-tool="image"],
  .user-mode.customer-studio .toolbox .tool[data-tool="shape"],
  .user-mode.customer-studio .toolbox #preview3dBtn{
    flex:0 0 58px;min-width:58px;width:58px;height:48px!important;margin:0!important;padding:2px!important;
    border-radius:6px;
  }
  .user-mode.customer-studio .toolbox .tool-icon{transform:scale(.82)}
  .user-mode.customer-studio .toolbox .tool-label{font-size:9px!important}
  .user-mode.customer-studio .toolbox kbd{display:none!important}
  .user-mode.customer-studio .customer-tool-separator{width:1px;height:34px;margin:0 2px;flex:0 0 1px}

  /* Touch targets are larger than desktop handles. */
  .user-mode.customer-studio .object.selected .handle{width:16px;height:16px}
  .user-mode.customer-studio .object.selected .nw{left:-9px;top:-9px}
  .user-mode.customer-studio .object.selected .ne{right:-9px;top:-9px}
  .user-mode.customer-studio .object.selected .sw{left:-9px;bottom:-9px}
  .user-mode.customer-studio .object.selected .se{right:-9px;bottom:-9px}
  .user-mode.customer-studio .object.selected .rotate{top:-34px;width:16px;height:16px;margin-left:-8px}

  /* Status bar: only keep the short working message on phones. */
  .user-mode.customer-studio .status{padding:0 7px;gap:5px;min-width:0;font-size:9px}
  .user-mode.customer-studio #statusHistory,
  .user-mode.customer-studio #statusContact,
  .user-mode.customer-studio #templateStatus{display:none!important}
  .user-mode.customer-studio #statusMessage{margin:0!important;padding:0!important;min-width:0;font-size:9px}

  /* Submit modal must remain fully usable inside a 360x640 viewport. */
  .user-mode .customer-submit-modal{padding:8px;align-items:flex-start;overflow:auto}
  .user-mode .customer-submit-dialog{width:100%;max-height:none;margin:auto 0;padding:18px 14px;border-radius:10px}
  .user-mode .customer-submit-dialog h2{font-size:18px}
  .user-mode .customer-submit-lead{font-size:11px;margin-bottom:10px}
  .user-mode .customer-submit-actions{position:sticky;bottom:0;background:#fff;padding-top:8px;margin-top:12px}
}

/* =========================================================
   2026-09-15 · Mobile Simple Editor landscape v1
   IMPORTANT: touch/mobile USER MODE only. Desktop/Admin/Item Studio untouched.
   Mobile exposes only: photo / text / preview / submit.
   ========================================================= */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  html,body{width:100%;height:100%;min-width:0;overflow:hidden!important}
  .app.user-mode.customer-studio{
    position:relative;width:100vw;height:100dvh;min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 74px!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-template-areas:'work menu'!important;
    background:#353b44;
  }
  .user-mode.customer-studio .title,
  .user-mode.customer-studio .context,
  .user-mode.customer-studio .panel,
  .user-mode.customer-studio .toolbox,
  .user-mode.customer-studio .status{display:none!important}

  .user-mode.customer-studio .workspace{
    grid-area:work!important;min-width:0!important;min-height:0!important;
    width:auto!important;height:100dvh!important;overflow:auto!important;
    overscroll-behavior:contain;background:#454b54;
  }
  .user-mode.customer-studio .stage{
    min-width:0!important;min-height:100%!important;width:100%!important;
    padding:8px!important;align-items:center!important;justify-content:center!important;
  }
  .user-mode.customer-studio .ruler,
  .user-mode.customer-studio .ruler-corner{display:none!important}
  .user-mode.customer-studio .artboard{transform-origin:center center!important}

  /* Right fixed rail: exactly four customer actions. */
  .user-mode.customer-studio .menu{
    grid-area:menu!important;position:relative!important;inset:auto!important;
    width:74px!important;height:100dvh!important;min-width:74px!important;
    display:flex!important;align-items:stretch!important;justify-content:center!important;
    padding:6px!important;overflow:hidden!important;background:#171d24!important;
    border:0!important;border-left:1px solid #2d3743!important;z-index:300!important;
  }
  .user-mode.customer-studio .customer-brand{display:none!important}
  .user-mode.customer-studio .customer-main-actions{
    width:100%!important;min-width:0!important;height:100%!important;margin:0!important;
    display:flex!important;flex-direction:column!important;gap:6px!important;
    justify-content:center!important;align-items:stretch!important;
  }
  .user-mode.customer-studio .customer-main-actions button{
    display:flex!important;flex:1 1 0!important;min-width:0!important;width:100%!important;
    min-height:46px!important;max-height:72px!important;height:auto!important;
    padding:5px 2px!important;border:1px solid #3a4655!important;border-radius:8px!important;
    background:#242d38!important;color:#fff!important;font-size:11px!important;font-weight:700!important;
    line-height:1.2!important;white-space:normal!important;align-items:center!important;justify-content:center!important;
    box-shadow:none!important;
  }
  .user-mode.customer-studio .customer-main-actions button b{display:none!important}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="frame"]{display:none!important}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="submit"]{
    background:#ef4036!important;border-color:#ef4036!important;color:#fff!important;
    position:static!important;box-shadow:none!important;
  }
  .user-mode.customer-studio .customer-main-actions [data-customer-action="photo"]::before{content:'사진';}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="text"]::before{content:'문구';}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="preview"]::before{content:'미리보기';}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="submit"]::before{content:'시안접수';}
  .user-mode.customer-studio .customer-main-actions [data-customer-action="photo"],
  .user-mode.customer-studio .customer-main-actions [data-customer-action="text"],
  .user-mode.customer-studio .customer-main-actions [data-customer-action="preview"],
  .user-mode.customer-studio .customer-main-actions [data-customer-action="submit"]{font-size:0!important}
  .user-mode.customer-studio .customer-main-actions [data-customer-action]::before{font-size:11px!important}

  /* Existing modals remain usable above the simplified shell. */
  .user-mode .customer-submit-modal{z-index:5000!important}
  .user-mode .customer-submit-dialog{max-height:94dvh!important;overflow:auto!important}
}

/* Portrait touch phones: do not squeeze the editor; ask for landscape. */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:700px){
  body:has(.app.user-mode.customer-studio)::before{
    content:'휴대폰을 가로로 돌려 편집해 주세요.';
    position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
    padding:28px;text-align:center;background:#171d24;color:#fff;font-size:17px;font-weight:700;line-height:1.55;
  }
  body:has(.app.user-mode.customer-studio)::after{
    content:'사진 · 문구 · 미리보기 · 시안접수 기능을 사용할 수 있습니다.';
    position:fixed;left:24px;right:24px;top:calc(50% + 42px);z-index:100000;
    text-align:center;color:#aeb9c6;font-size:12px;line-height:1.5;
  }
}

/* 20260927 optional submission attachments */
.customer-attachment-field.hidden{display:none!important}.customer-attachment-field input[type=file]{height:auto!important;padding:9px!important;background:#fff}.customer-attachment-help{display:block;margin-top:6px;color:#7a8490;font-size:11px}.customer-attachment-list{margin-top:6px;color:#4b5563;font-size:11px;line-height:1.45;word-break:break-all}

/* FIX03: 파일첨부는 에디터 간편주문/카페24 쇼핑몰 시안접수 공통 영역 */
.customer-common-attachment{margin-top:10px;padding:12px 14px;border:1px solid #dfe4ea;border-radius:8px;background:#f8fafb}.customer-common-attachment.hidden{display:none!important}.customer-common-attachment__head{display:flex;align-items:center;gap:7px;margin-bottom:8px}.customer-common-attachment__head b{font-size:13px}.customer-common-attachment__head span{font-size:11px;color:#7a8490}.customer-common-attachment input[type=file]{display:block;width:100%;box-sizing:border-box;height:auto!important;padding:9px!important;border:1px solid #d8dee6;background:#fff}

/* FIX48: keep edit-before-order product fields inside the mobile wizard card.
   app.css gives wizard inputs/selects width:100% while the default content-box
   adds their padding/border outside that width. The custom product picker button
   has the same geometry. Limit the fix to the three product-entry controls. */
#projectWizard #editBeforeOrderProductFields,
#projectWizard #editBeforeOrderProductFields > label,
#projectWizard #editorProductPicker{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#projectWizard #editorProductPickerButton,
#projectWizard #editorProductOptionSelect,
#projectWizard #editorProductQuantity{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* FIX49: prevent mobile browser form-focus auto zoom/pan on quantity.
   The quantity field inherits the editor's 13px font. Some Android in-app browsers
   zoom/pan the visual viewport when the numeric keyboard opens for a small-font input.
   Keep FIX48 geometry intact and only raise this focused form control to 16px on touch phones. */
@media (hover:none) and (pointer:coarse) and (max-width:900px){
  #projectWizard #editorProductQuantity{
    font-size:16px !important;
    line-height:1.4 !important;
  }
}