:root{font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;--bg-color: #fafafa;--card-bg: #ffffff;--surface-color: #fdf2f8;--accent-color: #ec4899;--accent-light: #fbcfe8;--accent-hover: #db2777;--text-primary: #1f1f1f;--text-secondary: #6b7280;--border-color: #f3e8ff;--success-color: #10b981;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);background-color:var(--bg-color);color:var(--text-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;max-width:900px;margin:0 auto;padding:2rem 1.5rem}h1{font-size:2rem;line-height:1.2;margin-bottom:.75rem;color:var(--text-primary);font-weight:700;letter-spacing:-.5px}@media(min-width:640px){h1{font-size:2.5rem}}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-md);transition:all .2s ease}@media(min-width:640px){.card{padding:2rem;border-radius:24px}}button{border-radius:12px;border:none;padding:.75rem 1.25rem;font-size:.938rem;font-weight:600;font-family:inherit;background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-hover) 100%);color:#fff;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:var(--shadow-sm)}button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 4px 20px #ec489940}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.upload-zone{border:2px dashed #e5e7eb;border-radius:16px;padding:2rem 1.5rem;margin:1.5rem 0;cursor:pointer;transition:all .3s ease;background:var(--surface-color);text-align:center}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent-color);background:linear-gradient(135deg,#fbcfe84d,#f9a8d433);transform:scale(1.01)}@media(min-width:640px){.upload-zone{padding:3rem 2rem;border-radius:20px}}.image-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem;margin:1.5rem 0;text-align:left}@media(min-width:640px){.image-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem}}.image-item{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;background:#f9fafb;transition:all .2s ease}.image-item:hover{border-color:var(--accent-light);box-shadow:var(--shadow-md)}.image-item img{width:100%;height:100%;object-fit:cover}.image-actions{position:absolute;inset:0;background:linear-gradient(180deg,#00000080,#0000004d);display:flex;align-items:center;justify-content:center;gap:.375rem;opacity:0;transition:opacity .2s ease}.image-item:hover .image-actions{opacity:1}.action-btn{width:32px;height:32px;padding:0;border-radius:8px;justify-content:center;font-size:.875rem;box-shadow:var(--shadow-sm)}.remove-btn{background:linear-gradient(135deg,#f87171,#ef4444)}.remove-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466}.move-btn{background:linear-gradient(135deg,#94a3b8,#64748b)}.move-btn:hover{background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 4px 12px #64748b66}.preview-container{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.preview-image{max-width:100%;border-radius:12px;box-shadow:var(--shadow-lg)}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem}@media(min-width:640px){.controls{gap:1rem}}.description{color:var(--text-secondary);font-size:.938rem;line-height:1.6;max-width:500px;margin:0 auto 1.5rem}@media(min-width:640px){.description{font-size:1rem}}.layout{min-height:100vh;display:flex;flex-direction:column}.layout-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem;background:var(--card-bg);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm)}.layout-brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.125rem}.layout-brand:hover{color:var(--accent-hover)}.layout-logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-color) 100%);border-radius:12px;color:#fff}.layout-title{letter-spacing:-.3px}.layout-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:12px;background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.layout-menu-btn:hover{background:var(--surface-color);color:var(--accent-color);transform:none;box-shadow:none}@media(min-width:768px){.layout-menu-btn{display:none}}.layout-nav{display:none;width:100%;flex-direction:column;gap:.25rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.layout-nav.open{display:flex}@media(min-width:768px){.layout-nav{display:flex;flex-direction:row;width:auto;padding-top:0;border-top:none;gap:.25rem}}.layout-nav-link{padding:.5rem .75rem;border-radius:8px;text-decoration:none;font-size:.938rem;font-weight:500;color:var(--text-secondary)}.layout-nav-link:hover{color:var(--accent-color);background:var(--surface-color)}.layout-nav-link.active{color:var(--accent-color);background:var(--accent-light)}.layout-main{flex:1;width:100%;max-width:900px;margin:0 auto;padding:1.5rem 1rem}@media(min-width:640px){.layout-main{padding:2rem 1.5rem}}.layout-footer{margin-top:auto;padding:1.5rem 1rem;border-top:1px solid var(--border-color);background:var(--card-bg);text-align:center}.layout-footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-bottom:.75rem}.layout-footer-link{font-size:.813rem;color:var(--text-secondary);text-decoration:none}.layout-footer-link:hover{color:var(--accent-color)}.layout-footer-copy{margin:0;font-size:.813rem;color:var(--text-secondary)}.page-content{max-width:720px;margin:0 auto}.page-content h1{font-size:1.75rem;margin-bottom:1rem}@media(min-width:640px){.page-content h1{font-size:2rem}}.page-content h2{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.5rem;font-weight:600;color:var(--text-primary)}.page-content p,.page-content li{color:var(--text-secondary);font-size:.938rem;line-height:1.7;margin-bottom:.75rem}.page-content ul{margin:.5rem 0 1rem 1.25rem;padding:0}.page-content .page-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-sm)}@media(min-width:640px){.page-content .page-card{padding:2rem;border-radius:20px}}.container{max-width:900px;margin:0 auto}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}header{margin-bottom:1.5rem;text-align:center}.logo-icon{width:56px;height:56px;margin:0 auto 1rem;background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent-color) 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}.logo-icon svg{color:#fff}.primary-btn{padding:.875rem 1.5rem;font-size:1rem;min-height:48px}@media(min-width:640px){.primary-btn{padding:1rem 2rem;font-size:1.063rem}}.download-btn{background:linear-gradient(135deg,var(--success-color) 0%,#059669 100%)}.download-btn:hover{box-shadow:var(--shadow-lg),0 4px 20px #10b9814d}.secondary-btn{background:#f3f4f6;color:var(--text-primary);box-shadow:none}.secondary-btn:hover{background:#e5e7eb;box-shadow:var(--shadow-sm)}h3{margin-top:0;font-weight:600;font-size:1rem;color:var(--text-primary)}.upload-zone h3{margin-bottom:.5rem;font-size:1.063rem;color:var(--text-primary)}.upload-zone p{margin:0}.image-list{border:1px solid var(--border-color);padding:.75rem;border-radius:16px;background:#fefefe}@media(min-width:640px){.image-list{padding:1rem}}.image-count{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;background:var(--accent-light);color:var(--accent-hover);border-radius:9999px;font-size:.813rem;font-weight:600;margin-bottom:1rem}.preview-container h3{font-size:1.125rem;color:var(--accent-color);font-weight:700}.settings-panel{margin:1.25rem 0;padding:1.25rem;background:#fefefe;border-radius:12px;border:1px solid var(--border-color)}@media(min-width:640px){.settings-panel{padding:1.5rem;border-radius:16px}}.setting-item{display:flex;flex-direction:column;gap:.625rem;align-items:center}.setting-item label{font-weight:600;font-size:.875rem;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.quality-badge{display:inline-flex;padding:.125rem .5rem;background:var(--accent-light);color:var(--accent-hover);border-radius:6px;font-size:.813rem;font-weight:700}.setting-item input[type=range]{width:100%;max-width:280px;height:6px;-webkit-appearance:none;appearance:none;background:#e5e7eb;border-radius:9999px;outline:none}.setting-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-hover) 100%);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-md);transition:transform .15s ease}.setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.hint{font-size:.813rem;color:var(--text-secondary)}footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-color);text-align:center;color:var(--text-secondary);font-size:.813rem}.result-actions{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}@media(min-width:640px){.result-actions{flex-direction:row;justify-content:space-between;align-items:center}}.result-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.upload-icon-wrapper{width:64px;height:64px;margin:0 auto 1rem;background:linear-gradient(135deg,var(--accent-light) 0%,rgba(251,207,232,.5) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center}.upload-icon-wrapper svg{color:var(--accent-color)}