body:has(.fashion-editor){background:#e6e7e9}
.fashion-editor{--fe-line:#d5d7db;--fe-panel:#f8f9fa;box-sizing:border-box;height:calc(100dvh - 122px);min-height:420px;margin:0;padding:0;color:#272a30;display:flex;flex-direction:column;overflow:hidden;font-size:12px}
.fashion-editor *{box-sizing:border-box}
.fashion-editor h1{font-size:17px;letter-spacing:-.6px;margin:0;white-space:nowrap}
.fe-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;background:#fff;border-bottom:1px solid var(--fe-line);flex-shrink:0}
.fe-actions{display:flex;align-items:center;gap:5px}
.fashion-editor button,.fe-file{border:1px solid #d6d8dc;border-radius:4px;background:#fff;color:#30343b;padding:6px 9px;font-size:11px;line-height:1.5;cursor:pointer;white-space:nowrap}
.fashion-editor button:hover,.fe-file:hover{background:#f0f1f3;border-color:#a4a9b2}
.fashion-editor button:disabled{opacity:.4;cursor:default}
.fashion-editor .fe-primary{background:#262a30;border-color:#262a30;color:#fff}
.fashion-editor .fe-primary:hover{background:#424750}
.fashion-editor input,.fashion-editor select,.fashion-editor textarea{border:1px solid #d6d8dc;border-radius:4px;padding:6px 7px;background:#fff;font-size:12px;min-width:0}
.fe-header input{width:160px;height:30px}
.fashion-editor .fe-toolbar{margin:0;padding:6px 12px;gap:8px;min-height:43px;border-bottom:1px solid var(--fe-line);background:var(--fe-panel);flex-shrink:0}
.fe-toolbar label{display:flex;align-items:center;gap:5px;margin:0;font-size:11px;white-space:nowrap}
.fe-toolbar select{padding:4px 6px}
.fe-toolbar input[type=color]{width:29px;height:28px;padding:2px}
.fe-file{display:inline-flex;align-items:center;justify-content:center}
.fe-file-menu{position:relative;font-size:11px;white-space:nowrap}
.fe-file-menu summary{cursor:pointer;padding:5px}
.fe-file-menu[open]{display:flex;gap:5px;align-items:center}
.fe-workspace{display:grid;grid-template-columns:224px minmax(0,1fr) 250px;gap:0;flex:1;min-height:0;overflow:hidden}
.fe-library,.fe-properties{padding:0 10px 12px;background:var(--fe-panel);overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bcc1c8 transparent}
.fe-library{border-right:1px solid var(--fe-line)}
.fe-properties{border-left:1px solid var(--fe-line)}
.fashion-editor .fe-panel-title{font-size:11px;font-weight:700;letter-spacing:.1px;margin:0 -10px 9px;padding:9px 10px;background:#eceef1;border-bottom:1px solid var(--fe-line)}
.fe-properties .fe-panel-title:not(:first-child){margin-top:14px;border-top:1px solid var(--fe-line)}
.fe-library-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--fe-line);border-radius:4px;overflow:hidden}
.fe-library-tabs button{border:0;border-radius:0;background:transparent;font-size:10px;padding:6px 0}
.fe-library-tabs button[aria-selected=true]{background:#30343b;color:#fff}
#asset-search{display:flex;margin-top:9px;gap:4px}
#asset-query{width:100%;min-width:0}
#asset-status,#tryon-selection,#ai-status{font-size:10px;line-height:1.5;color:#737984;margin:7px 0}
.fe-asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.fe-asset-card{min-width:0}
.fe-asset-card>button{padding:0;width:100%;overflow:hidden;text-align:left;white-space:normal}
.fe-asset-card img{display:block;aspect-ratio:1;width:100%;object-fit:contain;background:#eef0f2}
.fe-asset-card span{display:block;font-size:10px;padding:5px;line-height:1.4;overflow:hidden;height:36px}
.fe-asset-card .fe-extra{width:100%;font-size:9px;padding:4px 0;border:0;color:#747b85;background:transparent}
#asset-more{width:100%;margin-top:8px}
.fe-canvas-column{min-width:0;min-height:0;display:flex;flex-direction:column;background:#dfe1e5;overflow:hidden}
.fashion-editor #editor-status{order:2;margin:0;padding:6px 10px;min-height:28px;font-size:10px;line-height:1.5;background:#eceef1;border-top:1px solid var(--fe-line);flex-shrink:0;color:#69717c}
.fashion-editor .editor-stage{flex:1;min-height:0;overflow:hidden;padding:20px;display:flex;align-items:center;justify-content:center;border-radius:0;background-color:#dfe1e5;background-image:linear-gradient(45deg,#d7d9de 25%,transparent 25%),linear-gradient(-45deg,#d7d9de 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7d9de 75%),linear-gradient(-45deg,transparent 75%,#d7d9de 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.fashion-editor .editor-stage canvas{display:block;flex-shrink:1;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 14px #0002}
.fe-properties label{margin:7px 0;gap:4px;font-size:10px}
.fe-properties .property-grid{gap:6px}
.fe-wide{width:100%;margin:2px 0}
.fe-tryon{padding:8px 0 10px;border-bottom:1px solid var(--fe-line)}
.fe-tryon summary{font-size:11px;font-weight:600;cursor:pointer}
.fe-tryon p{font-size:10px;color:#737984;line-height:1.5}
.fe-tryon input[type=file]{padding:0;font-size:10px;width:100%;border:0}
.fe-tryon .fe-file{align-items:stretch;white-space:normal;background:#fff;padding:8px;gap:7px}
.layer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.fashion-editor .layer-actions button{padding:5px 0;font-size:10px}
#layer-list button{border-radius:3px;font-size:11px;padding:7px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis}
#layer-list button.active{background:#e4e8f1;border-color:#98a4be}
#layer-list:empty:after{content:'이미지나 텍스트를 추가하면 표시됩니다.';display:block;padding:8px 0;font-size:10px;color:#858b94}
.fashion-editor [hidden]{display:none!important}
.fe-mobile-panels{display:none}
#editor-projects,#asset-images{border:1px solid #d5d7dc;border-radius:8px;padding:18px;width:min(90vw,660px);max-height:85vh;color:#25272c}
#editor-projects::backdrop,#asset-images::backdrop{background:#0006}
#editor-projects header,#asset-images header{display:flex;align-items:center;justify-content:space-between}
#editor-projects h2,#asset-images h2{font-size:17px}
#editor-projects button,#asset-images button{border:1px solid #ddd;background:#fff;border-radius:4px;padding:7px;cursor:pointer}
.fe-project{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #eee;align-items:center}
.fe-project img{width:64px;height:76px;object-fit:contain;background:#f4f5f7}
.fe-project div{flex:1}.fe-project strong{font-size:12px}.fe-project small{display:block;margin:5px 0;color:#777}.fe-project button{font-size:11px;margin-right:5px}
#projects-status{font-size:12px;color:#777}#editor-projects>a{display:block;font-size:12px;margin-top:16px}#asset-image-list{max-height:65vh;overflow:auto}
.fashion-editor button:focus-visible,.fashion-editor .fe-file:focus-within{outline:2px solid #53688f;outline-offset:2px}
@media(max-width:1000px) and (min-width:701px){.fe-workspace{grid-template-columns:190px minmax(0,1fr) 218px}.fe-header input{width:120px}.fashion-editor .editor-stage{padding:12px}}
@media(max-width:700px){
 .fashion-editor{height:calc(100dvh - 122px);min-height:400px}
 .fe-header{padding:7px 8px;gap:6px;align-items:flex-start}
 .fashion-editor h1{font-size:15px;padding-top:5px}
 .fe-actions{justify-content:flex-end;gap:4px;flex-wrap:wrap;max-width:270px}
 .fe-actions button{min-height:30px;padding:5px 7px;font-size:10px}
 .fe-header input{width:104px;flex-grow:1}
 .fashion-editor .fe-toolbar{flex-wrap:nowrap;overflow-x:auto;padding:6px 8px;gap:6px;scrollbar-width:none}
 .fe-toolbar>*{flex-shrink:0}.fe-toolbar button,.fe-toolbar .fe-file{min-height:32px;padding:6px 8px}
 .fe-mobile-panels{display:flex;background:#f8f9fa;border-bottom:1px solid var(--fe-line);padding:0 8px;gap:4px;flex-shrink:0}
 .fe-mobile-panels button{flex:1;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:9px 3px;font-size:11px;color:#7a818d}
 .fe-mobile-panels button[aria-pressed=true]{color:#252b37;border-bottom-color:#252b37;font-weight:700}
 .fe-workspace{display:flex;position:relative}
 .fe-library,.fe-properties,.fe-canvas-column{width:100%;height:100%;border:0}
 .fashion-editor[data-mobile-panel=canvas] .fe-library,.fashion-editor[data-mobile-panel=canvas] .fe-properties,
 .fashion-editor[data-mobile-panel=library] .fe-canvas-column,.fashion-editor[data-mobile-panel=library] .fe-properties,
 .fashion-editor[data-mobile-panel=properties] .fe-canvas-column,.fashion-editor[data-mobile-panel=properties] .fe-library{display:none}
 .fe-library,.fe-properties{padding:0 12px 16px}
 .fashion-editor .fe-panel-title{margin-left:-12px;margin-right:-12px;padding:10px 12px}
 .fe-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .fashion-editor .editor-stage{padding:14px}
 .fe-properties .fe-tryon{padding:12px 0}
 .fe-properties label{font-size:12px}.fe-properties input,.fe-properties select,.fe-properties textarea{font-size:16px}
 .layer-actions button{min-height:36px}#layer-list button{padding:10px}
}
/* Compact tools and properties, with a readable status line. */
.fashion-editor .fe-header{padding:4px 8px;gap:6px}
.fashion-editor .fe-toolbar{padding:3px 6px;min-height:34px;gap:5px}
.fashion-editor .fe-icon{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.fe-header input{height:28px;width:134px}.fe-actions{gap:3px}
.fe-library,.fe-properties{padding:0 6px 8px}
.fashion-editor .fe-panel-title{margin:0 -6px 0;padding:6px 7px;font-size:11px}
.fe-library-tabs{margin:0 -6px;width:calc(100% + 12px);border:0;border-bottom:1px solid var(--fe-line);border-radius:0}
.fe-library-tabs button{padding:7px 0;font-size:11px}
#asset-search{margin-top:5px;gap:3px}#asset-status{margin:4px 0;font-size:10px}
.fe-asset-grid{gap:4px}.fe-asset-card span{padding:4px;height:32px;font-size:9px}.fe-asset-card .fe-extra{padding:3px 0}
.fe-properties .fe-panel-title:not(:first-child){margin-top:7px}
.fe-properties label{margin:3px 0;gap:2px}
.fashion-editor .fe-properties input,.fashion-editor .fe-properties select,.fashion-editor .fe-properties textarea{padding:3px 5px;font-size:11px;height:25px}
.fashion-editor .fe-properties textarea{height:54px}
.fe-properties .property-grid{gap:3px 5px}
.fashion-editor .fe-properties input[type=color]{padding:1px}
#layer-properties[data-layer-type=image] .property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fashion-editor #editor-status{font-size:14px;font-weight:600;padding:9px 10px;min-height:40px;line-height:1.5;color:#283e62;background:#eef3fc;border-top:1px solid #cbd6ea}
.fe-properties #ai-status{font-size:12px;color:#394b65}
.fashion-editor .editor-stage{padding:20px 14px}
@media(max-width:700px){
 .fe-header{align-items:center}.fe-actions{flex-wrap:nowrap;max-width:none}
 .fe-header input{width:80px;flex-grow:0;min-width:60px}
 .fe-actions .fe-icon,.fe-toolbar .fe-icon{width:32px;height:32px;min-height:32px;padding:0}
 .fashion-editor h1{font-size:13px;padding:0}
 .fe-toolbar label{font-size:10px}.fe-toolbar select{max-width:100px}
 .fe-properties label{font-size:11px;margin:5px 0}
 .fashion-editor .fe-properties input,.fashion-editor .fe-properties select,.fashion-editor .fe-properties textarea{font-size:16px;height:34px}
 .fashion-editor .fe-properties textarea{height:60px}
 .fashion-editor #editor-status{font-size:13px;padding:8px;min-height:38px}
 .fe-library-tabs{font-size:12px}.fe-library,.fe-properties{padding:0 6px 10px}
 .fashion-editor .fe-panel-title{margin:0 -6px;padding:7px}
}

@media(max-width:1000px) and (min-width:701px){.fe-workspace{grid-template-columns:220px minmax(0,1fr) 210px}}
/* One shared toolbar; names and canvas options live in dialogs. */
.fashion-editor .fe-unified-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:12px;padding:5px 8px;min-height:40px;background:#fff;overflow:visible}
.fe-tools,.fe-unified-toolbar .fe-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.fe-unified-toolbar .fe-actions{border-left:1px solid #d5d7db;padding-left:8px}
#layer-list{margin-top:7px}
.fe-settings-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #d5d7dc;border-radius:10px;padding:20px;color:#292f38;box-shadow:0 12px 48px #0003}
.fe-settings-dialog::backdrop{background:#18213266}
.fe-settings-dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.fe-settings-dialog h2{font-size:18px;margin:0;font-weight:700}
.fe-settings-dialog label{display:block;font-size:12px;margin:16px 0 7px}
.fe-settings-dialog input:not([type=file]),.fe-settings-dialog select{display:block;box-sizing:border-box;width:100%;height:42px;padding:9px 10px;border:1px solid #d5d7dc;border-radius:5px;background:#fff;font:inherit;font-size:14px}
.fe-settings-dialog input[type=color]{padding:4px;width:64px}
.fe-settings-dialog button,.fe-settings-dialog .fe-file{font:inherit;font-size:13px;border:1px solid #d5d7dc;border-radius:5px;padding:9px 13px;background:#fff;cursor:pointer}
.fe-settings-dialog button:disabled{opacity:.5;cursor:wait}
.fe-settings-dialog .fe-primary{background:#292f38;border-color:#292f38;color:#fff}
.fe-settings-dialog header button{font-size:20px;border:0;padding:0;width:32px;height:32px}
.fe-dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:20px}
#editor-save-feedback{font-size:13px;line-height:1.5;color:#455c80;margin:10px 0;min-height:20px}
.fe-settings-dialog .fe-dialog-wide{display:block;width:100%;margin:10px 0;text-align:center}
@media(max-width:700px){
 .fashion-editor .fe-unified-toolbar{padding:4px;gap:3px;min-height:42px}
 .fe-tools,.fe-unified-toolbar .fe-actions{gap:1px}
 .fe-unified-toolbar .fe-actions{padding-left:3px}
 .fashion-editor .fe-unified-toolbar .fe-icon{width:30px;height:34px;min-height:34px;font-size:13px}
 .fe-settings-dialog{padding:18px;width:calc(100vw - 24px)}
 .fe-settings-dialog input:not([type=file]),.fe-settings-dialog select{font-size:16px}
 .fe-settings-dialog button,.fe-settings-dialog .fe-file{min-height:40px}
 #layer-list{margin-top:8px}
}
@media(max-width:359px){.fashion-editor .fe-unified-toolbar .fe-icon{width:26px}.fe-tools,.fe-unified-toolbar .fe-actions{gap:0}}
.fe-settings-dialog{position:fixed;inset:0;margin:auto;height:fit-content;background:#fff}
.fashion-editor .fe-mobile-more{display:none}
@media(max-width:700px){
 .fe-unified-toolbar #new-project,.fe-unified-toolbar #my-projects,.fe-unified-toolbar #open-project-files{display:none}
 .fashion-editor .fe-mobile-more{display:inline-flex}
 .fashion-editor .fe-unified-toolbar .fe-icon{width:36px;height:40px;min-height:40px}
}
@media(max-width:359px){.fashion-editor .fe-unified-toolbar .fe-icon{width:31px}}
.fashion-editor{min-height:0}