@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.w-full{width:100%}.max-w-full{max-width:100%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.overflow-x-hidden{overflow-x:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.underline{text-decoration-line:underline}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--accent:#3d63dd;--accent-hover:#4a6fe8;--accent-dark:#2a4bb5;--accent-light:#d4deff;--grey-1:#f4f6ff;--grey-2:#ebeeff;--grey-3:#dde1f4;--grey-4:#c1c6e0;--grey-5:#8b8d98;--grey-6:#4a4c5e;--grey-7:#1c1e2e;--bg-app:var(--grey-1);--bg-panel:#fff;--bg-slot:var(--grey-3);--text-primary:var(--grey-7);--text-secondary:var(--grey-6);--text-muted:var(--grey-5);--border:var(--grey-4);--paprika:var(--accent);--font-main:"Inter", "Noto Sans KR", sans-serif}.dark{--bg-app:#111;--bg-panel:#1a1d20;--bg-slot:#22262a;--text-primary:#ededef;--text-secondary:#a0a5b1;--text-muted:#707683;--border:#343840;--grey-2:#1c1f23;--grey-3:#22262a;--accent:#3d63dd;--accent-hover:#4a6fe8;--accent-light:#202e5c}.dark header{background:var(--bg-panel)!important;border-color:var(--border)!important}.dark .control-panel{background:var(--bg-panel);border-color:var(--border)}.dark .item-editor{background:var(--grey-2);border-color:var(--border)}.dark .slot-card{background:var(--bg-slot);border-color:var(--border)}.dark .slot-card:hover,.dark .slot-card.active{border-color:var(--accent);background:var(--accent-light)}.dark .slot-card.filled{background:var(--bg-slot);border-color:var(--accent)}.dark .section-divider{border-color:var(--border)}.dark [style*="background: #fff"]{background:#181b30!important;border-color:#252850!important}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-app);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-main);-webkit-font-smoothing:antialiased;font-size:15px}#root{width:100%}.app-container{flex-direction:column;min-height:100dvh;display:flex}@media(min-width:1100px){.app-container{height:100vh;overflow:hidden}}.app-root{flex-direction:column;flex:1;width:100%;display:flex}@media(min-width:1100px){.app-root{flex-direction:row;overflow:hidden}}.canvas-zone{background:var(--bg-app);width:100%;display:flex}@media(max-width:1099px){.canvas-zone{aspect-ratio:1200/675;border-bottom:1px solid var(--border);justify-content:flex-start;align-items:flex-start;height:auto;padding:0;overflow:hidden}}@media(min-width:1100px){.canvas-zone{flex:1;justify-content:center;align-items:center;height:100%;padding:1.25rem;overflow:auto}}.glamour-canvas{-webkit-user-select:none;user-select:none;border-radius:0;flex-shrink:0;width:1200px;height:675px;display:flex;overflow:hidden;box-shadow:0 8px 48px #1c1e2e2e,0 0 0 1px #1c1e2e1a}.glamour-canvas img{-webkit-user-drag:none}.photo-panel{background:var(--grey-3);flex-shrink:0;width:400px;height:675px;position:relative;overflow:hidden}.drop-hint{cursor:pointer;border:2px dashed var(--border);flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;transition:border-color .2s,background .2s;display:flex}.drop-hint:hover,.drop-hint.dragging{border-color:var(--accent);background:var(--accent-light)}.drop-hint svg{color:var(--grey-5)}.drop-hint span{color:var(--text-secondary);font-size:.95rem;font-weight:500}.drag-active-overlay{z-index:50;border:3px dashed var(--accent);background:#3d63dd1a;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.drag-active-overlay span{color:var(--accent);font-size:1.25rem;font-weight:700}.btn-confirm{z-index:40;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;padding:.65rem 1.75rem;font-size:.925rem;font-weight:700;transition:opacity .15s,transform .15s;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #3d63dd59}.btn-confirm:hover{opacity:.9;transform:translate(-50%)scale(1.03)}.btn-confirm:active{transform:translate(-50%)scale(.97)}.glass-panel{flex-shrink:0;width:800px;height:675px;position:relative;overflow:hidden}.glass-bg-photo{object-fit:cover;pointer-events:none;-webkit-filter:blur(32px)saturate(150%);width:120%;height:120%;position:absolute;inset:-10%;transform:translateZ(0)}.glass-overlay{z-index:2;background:#1c1e2e9e;width:100%;height:100%;position:absolute;inset:0}.glass-content{z-index:10;flex-direction:column;height:100%;padding:2rem 2.5rem 1.75rem;display:flex;position:relative}.canvas-title{letter-spacing:-.025em;color:#fff;text-shadow:0 2px 12px #0006;margin-bottom:1.25rem;font-size:2.4rem;font-weight:800;line-height:1.1}.item-row{border-bottom:1px solid #ffffff14;align-items:flex-start;gap:.75rem;padding:.5rem 0;display:flex}.item-row:last-of-type{border-bottom:none}.item-icon{background:#ffffff1a;border:1px solid #ffffff24;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.item-icon img{object-fit:cover;width:100%;height:100%}.item-names{flex-direction:column;flex:1;gap:.15rem;display:flex}.item-name-kr{color:#fff;font-size:1.15rem;font-weight:700;line-height:1.2}.item-name-sub{opacity:.6;color:#d4daff;letter-spacing:.02em;font-size:.8rem}.dye-badges{flex-direction:column;align-items:flex-end;gap:.25rem;display:flex}.dye-badge{color:#d4daff;background:#0000004d;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:.35rem;padding:.15rem .55rem;font-size:.72rem;display:flex}.dye-swatch{border:1px solid #ffffff40;border-radius:50%;flex-shrink:0;width:8px;height:8px}.copyright{letter-spacing:.1em;text-transform:uppercase;opacity:.3;color:#d4daff;align-self:flex-end;margin-top:auto;font-size:.55rem}.control-panel{background:var(--bg-panel);flex-direction:column;gap:0;width:100%;padding:1rem;display:flex;position:relative}@media(min-width:1100px){.control-panel{border-left:1px solid var(--border);flex-shrink:0;width:420px;height:100%;padding:1.5rem;overflow-y:auto}}.control-panel::-webkit-scrollbar{width:4px}.control-panel::-webkit-scrollbar-thumb{background:var(--grey-4);border-radius:2px}.section-title{letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;font-size:.75rem;font-weight:700}.section-divider{border:none;border-top:1px solid var(--border);margin:1.1rem 0}.input-base{background:var(--grey-2);border:1px solid var(--border);width:100%;color:var(--text-primary);font-size:1rem;line-height:1.5;font-family:var(--font-main);border-radius:6px;outline:none;padding:.55rem .9rem;transition:border-color .15s,box-shadow .15s}.input-base::placeholder{color:var(--text-muted);font-size:.9rem}.input-base:focus{border-color:var(--accent);box-shadow:0 0 0 3px #3d63dd1f}.input-base.error{border-color:#e03131}input[type=range]{accent-color:var(--accent);cursor:ew-resize}.slots-grid{grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.25rem;display:grid}@media(max-width:480px){.slots-grid{grid-template-columns:repeat(3,1fr);gap:.4rem}}.slot-card{background:var(--bg-slot);border:1.5px solid var(--border);cursor:pointer;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;height:96px;padding:.6rem .4rem;transition:border-color .15s,background .15s,box-shadow .15s;display:flex;overflow:hidden}@media(max-width:480px){.slot-card{height:84px;padding:.4rem .2rem}}.slot-card:hover{border-color:var(--accent);background:var(--accent-light)}.slot-card.active{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 2px #3d63dd33}.slot-card.filled{border-color:var(--accent-dark);background:#fff}.slot-label{color:var(--text-secondary);text-align:center;font-size:.72rem;font-weight:600}@media(max-width:480px){.slot-label{font-size:.65rem}}.slot-icon-placeholder{background:#3d63dd1a;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.slot-icon-placeholder svg{opacity:.5;color:var(--accent)}.slot-filled-icon{object-fit:cover;border-radius:4px;flex-shrink:0;width:34px;height:34px}.slot-name-preview{color:var(--text-primary);text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;padding:0 2px;font-size:.65rem;font-weight:600;line-height:1.2;overflow:hidden}@media(max-width:480px){.slot-name-preview{font-size:.6rem;line-height:1.1}}.item-editor{background:var(--grey-2);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:.55rem;margin-bottom:.75rem;padding:.9rem;display:flex}.item-editor-header{justify-content:space-between;align-items:center;margin-bottom:.1rem;display:flex}.item-editor-label{color:var(--accent);font-size:.8rem;font-weight:700}.item-editor-close{background:var(--grey-3);cursor:pointer;width:20px;height:20px;color:var(--text-secondary);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;display:flex}.dye-row{gap:.4rem;display:flex}.dye-row .input-base{padding:.35rem .6rem;font-size:.85rem}.spinner{border:2px solid var(--accent);border-top-color:#0000;border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:.65s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn-export{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;padding:.75rem;font-size:1rem;font-weight:700;transition:background .15s}.btn-export:hover{background:var(--accent-hover)}@media(max-width:1700px)and (min-width:1401px){.glamour-canvas{transform-origin:50%;transform:scale(.82)}}@media(max-width:1400px)and (min-width:1100px){.glamour-canvas{transform-origin:50%;transform:scale(.7)}}@media(max-width:1099px){.glamour-canvas{transform-origin:0 0;transform:scale(calc(100vw / 1200));box-shadow:none}}.export-wrapper{border-top:1px solid var(--border);margin-top:auto;padding-top:1.25rem}@media(max-width:1099px){.export-wrapper{z-index:100;background:var(--bg-panel);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);margin:1.5rem -1rem -1rem;position:sticky;bottom:0;box-shadow:0 -10px 25px #00000026}}.dye-search-wrapper{flex:1;align-items:center;gap:.4rem;display:flex;position:relative}.dye-search-dropdown{background:var(--bg-panel);border:1px solid var(--border);z-index:50;border-radius:6px;max-height:15rem;margin-top:4px;position:absolute;top:100%;left:16px;right:0;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.dye-search-item{cursor:pointer;align-items:center;gap:.4rem;padding:.4rem .6rem;transition:background .15s;display:flex}.dye-search-item:hover{background:var(--bg-slot)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}