@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--color-bg:#0a0a0f;--color-bg-secondary:#12121a;--color-bg-card:#1a1a2e;--color-bg-card-hover:#222240;--color-surface:#16162a;--color-primary:#7c3aed;--color-primary-light:#a78bfa;--color-accent:#06b6d4;--color-accent-light:#22d3ee;--gradient-primary:linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);--gradient-glow:linear-gradient(135deg, #7c3aed66 0%, #06b6d466 100%);--gradient-card:linear-gradient(145deg, #1a1a2e 0%, #12121a 100%);--color-text:#fff;--color-text-secondary:#cbd5e1;--color-text-muted:#94a3b8;--color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 40px #7c3aed26;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease;--font-sans:"Inter", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=light]{--color-bg:#f5f5f9;--color-bg-secondary:#eeeef3;--color-bg-card:#fff;--color-bg-card-hover:#f0f0f8;--color-surface:#f8f8fc;--color-primary:#6d28d9;--color-primary-light:#7c3aed;--color-accent:#0891b2;--color-accent-light:#06b6d4;--gradient-primary:linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);--gradient-glow:linear-gradient(135deg, #6d28d933 0%, #0891b233 100%);--gradient-card:linear-gradient(145deg, #fff 0%, #f5f5f9 100%);--color-text:#0f172a;--color-text-secondary:#334155;--color-text-muted:#64748b;--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 4px 16px #00000014;--shadow-lg:0 8px 32px #0000001a;--shadow-glow:0 0 40px #6d28d91a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal);line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 20% 20%,#7c3aed14 0%,#0000 50%),radial-gradient(at 80% 80%,#06b6d40f 0%,#0000 50%);width:200%;height:200%;position:fixed;top:-50%;left:-50%}[data-theme=light] body:before{background:radial-gradient(at 20% 20%,#6d28d90a 0%,#0000 50%),radial-gradient(at 80% 80%,#0891b208 0%,#0000 50%)}#app{flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:720px;padding:0 var(--space-md);margin:0 auto}.main{padding:var(--space-xl) 0;flex:1}.main.embed-mode{padding:var(--space-md) 0}.header{padding:var(--space-2xl) 0 var(--space-lg);text-align:center}.header-content{max-width:720px;padding:0 var(--space-md);margin:0 auto}.header-top{justify-content:center;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-md);display:flex}.logo{align-items:center;gap:var(--space-sm);display:flex}.logo-icon{border-radius:var(--radius-md);background:var(--gradient-primary);color:#fff;justify-content:center;align-items:center;width:48px;height:48px;display:flex;box-shadow:0 0 20px #7c3aed4d}.logo-text{color:var(--color-text);letter-spacing:-.02em;font-size:2rem;font-weight:700}.logo-text span{background:var(--gradient-primary);-webkit-text-fill-color:transparent;background-clip:text}.theme-toggle{border-radius:var(--radius-md);background:var(--color-bg-card);cursor:pointer;width:40px;height:40px;transition:all var(--transition-fast);border:1px solid #ffffff1a;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background:var(--color-bg-card-hover);border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.theme-icon{font-size:1.2rem}.header-desc{color:var(--color-text-secondary);font-size:.95rem;font-weight:400}.header-banner{margin-top:var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.header-banner-img{object-fit:cover;width:100%;height:auto;max-height:280px;display:block}.header-banner-overlay{padding:var(--space-xl) var(--space-lg) var(--space-md);background:linear-gradient(#0000,#000000b3);position:absolute;bottom:0;left:0;right:0}.header-banner-text{color:#fff;text-shadow:0 1px 4px #00000080;text-align:center;font-size:.95rem;font-weight:500}.dropzone{border:2px dashed var(--color-text-muted);border-radius:var(--radius-lg);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);background:var(--gradient-card);position:relative;overflow:hidden}.dropzone:hover{border-color:var(--color-primary-light);background:var(--color-bg-card-hover);box-shadow:var(--shadow-glow)}.dropzone--active{border-color:var(--color-accent);background:#06b6d40d;border-style:solid;transform:scale(1.01);box-shadow:0 0 40px #06b6d426}.dropzone--error{border-color:var(--color-error);animation:.4s shake}.dropzone-content{z-index:1;position:relative}.dropzone-icon{color:var(--color-text-muted);margin-bottom:var(--space-md);transition:color var(--transition-normal), transform var(--transition-normal)}.dropzone:hover .dropzone-icon{color:var(--color-primary-light);transform:translateY(-4px)}.dropzone-title{margin-bottom:var(--space-xs);color:var(--color-text);font-size:1.15rem;font-weight:600}.dropzone-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-sm);transition:color var(--transition-fast);font-size:.9rem}.dropzone-formats{color:var(--color-text-muted);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);background:#ffffff08;font-size:.8rem;display:inline-block}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.dropzone-guide{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid #ffffff0d}.dropzone-guide p{color:var(--color-text-muted);opacity:.7;margin:2px 0;font-size:.7rem}.preview-panel{margin-top:var(--space-xl);opacity:0;transition:opacity var(--transition-slow), transform var(--transition-slow);transform:translateY(12px)}.preview-panel--visible{opacity:1;transform:translateY(0)}.preview-video-wrapper{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin-bottom:var(--space-lg);background:#000;overflow:hidden}.preview-video{object-fit:contain;background:#000;width:100%;max-height:400px;display:block}.file-info-hero{align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--gradient-card);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);border:1px solid #7c3aed26;animation:.4s fadeInUp;display:flex}.file-info-hero-icon{flex-shrink:0;font-size:2.2rem}.file-info-hero-detail{flex-direction:column;gap:2px;display:flex}.file-info-hero-size{background:var(--gradient-primary);-webkit-text-fill-color:transparent;background-clip:text;font-size:1.8rem;font-weight:800;line-height:1.2}.file-info-hero-name{color:var(--color-text-secondary);font-size:.85rem}.info-grid{gap:var(--space-sm);margin-bottom:var(--space-lg);grid-template-columns:repeat(2,1fr);display:grid}.info-item{padding:var(--space-sm) var(--space-md);background:var(--color-bg-card);border-radius:var(--radius-sm);border:1px solid #ffffff0a;flex-direction:column;gap:2px;display:flex}.info-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:500}.info-value{color:var(--color-text);word-break:break-all;font-size:.95rem;font-weight:600}.reduction-selector{margin-bottom:var(--space-lg)}.reduction-title{margin-bottom:var(--space-md);color:var(--color-text);font-size:1.05rem;font-weight:700}.preset-buttons{gap:var(--space-sm);margin-bottom:var(--space-lg);grid-template-columns:repeat(4,1fr);display:grid}.preset-btn{padding:var(--space-md) var(--space-sm);background:var(--color-bg-card);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-sans);color:var(--color-text);border:2px solid #0000;flex-direction:column;align-items:center;gap:4px;display:flex;position:relative}.preset-btn:hover{background:var(--color-bg-card-hover);border-color:#7c3aed33}.preset-btn--active{border-color:var(--color-primary);background:#7c3aed1a;box-shadow:0 0 16px #7c3aed26}.preset-btn--recommended{border-color:#06b6d433}.preset-percent{color:var(--color-text);font-size:1.3rem;font-weight:800}.preset-btn--active .preset-percent{background:var(--gradient-primary);-webkit-text-fill-color:transparent;background-clip:text}.preset-desc{color:var(--color-text-muted);font-size:.7rem}.preset-badge{background:var(--gradient-primary);color:#fff;border-radius:999px;padding:2px 6px;font-size:.6rem;font-weight:700;position:absolute;top:-6px;right:-6px}.slider-wrapper{margin-bottom:var(--space-lg)}.reduction-slider{appearance:none;cursor:pointer;background:#ffffff14;border-radius:999px;outline:none;width:100%;height:8px}.reduction-slider::-webkit-slider-thumb{appearance:none;background:var(--gradient-primary);border:3px solid var(--color-bg);cursor:grab;width:24px;height:24px;transition:box-shadow var(--transition-fast);border-radius:50%;box-shadow:0 0 12px #7c3aed66}.reduction-slider::-webkit-slider-thumb:hover{box-shadow:0 0 20px #7c3aed99}.reduction-slider::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 0 24px #7c3aedcc}.reduction-slider::-moz-range-thumb{background:var(--gradient-primary);border:3px solid var(--color-bg);cursor:grab;border-radius:50%;width:24px;height:24px;box-shadow:0 0 12px #7c3aed66}.slider-labels{margin-top:var(--space-xs);color:var(--color-text-muted);justify-content:space-between;font-size:.7rem;display:flex}.estimate-card{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-lg);background:#06b6d40f;border:1px solid #06b6d41f}.estimate-row{justify-content:center;align-items:center;gap:var(--space-sm);display:flex}.estimate-row:first-child{margin-bottom:var(--space-sm)}.estimate-label{color:var(--color-text-secondary);font-size:.85rem}.estimate-reduction{background:var(--gradient-primary);-webkit-text-fill-color:transparent;background-clip:text;font-size:1.6rem;font-weight:800}.estimate-original{color:var(--color-text-secondary);font-size:1.1rem;font-weight:600}.estimate-arrow{color:var(--color-accent);font-size:1.2rem}.estimate-result{color:var(--color-accent-light);font-size:1.3rem;font-weight:800}.mosaic-preview-area{margin-bottom:var(--space-lg);animation:.3s fadeInUp}.mosaic-preview-hint{text-align:center;color:var(--color-text-secondary);margin-top:var(--space-sm);font-size:.85rem}#mosaicLevels{grid-template-columns:repeat(3,1fr)}@media (width<=480px){.info-grid{grid-template-columns:1fr}.preset-buttons{grid-template-columns:repeat(2,1fr)}#mosaicLevels{grid-template-columns:repeat(3,1fr)}.file-info-hero-size{font-size:1.4rem}}.progress-container{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--gradient-card);border-radius:var(--radius-lg);border:1px solid #ffffff0d;animation:.3s fadeInUp}.progress-status{color:var(--color-text-secondary);margin-bottom:var(--space-md);font-size:.9rem;font-weight:500}.progress-bar-wrapper{align-items:center;gap:var(--space-md);display:flex}.progress-bar{background:#ffffff0f;border-radius:999px;flex:1;height:10px;position:relative;overflow:hidden}.progress-bar-fill{background:var(--gradient-primary);z-index:2;border-radius:999px;width:0%;height:100%;transition:width .3s;position:relative}.progress-bar-glow{background:var(--gradient-glow);filter:blur(6px);z-index:1;border-radius:999px;width:0%;height:18px;transition:width .3s;position:absolute;top:-4px;left:0}.progress-percent{color:var(--color-primary-light);text-align:right;font-variant-numeric:tabular-nums;min-width:42px;font-size:.9rem;font-weight:700}.progress-eta{margin-top:var(--space-sm);color:var(--color-text-muted);text-align:center;font-size:.8rem}.progress-disclaimer{margin-top:var(--space-md);color:var(--color-text-secondary);text-align:center;font-size:.85rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-card{margin-top:var(--space-xl);padding:var(--space-xl);background:var(--gradient-card);border-radius:var(--radius-lg);opacity:0;transition:opacity var(--transition-slow), transform var(--transition-slow);border:1px solid #ffffff0d;transform:translateY(12px)}.result-card--visible{opacity:1;transform:translateY(0)}.result-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);display:flex}.result-icon{font-size:1.5rem}.result-title{color:var(--color-success);font-size:1.3rem;font-weight:700}.result-comparison{justify-content:center;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.result-item{text-align:center;padding:var(--space-md);border-radius:var(--radius-md);background:#ffffff08;border:1px solid #ffffff0d;flex:1}.result-item--original .result-value{color:var(--color-text-secondary)}.result-item--compressed .result-value{color:var(--color-accent-light)}.result-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs);font-size:.75rem;display:block}.result-value{font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:700}.result-arrow{color:var(--color-text-muted);flex-shrink:0}.result-rate{text-align:center;margin-bottom:var(--space-xl);padding:var(--space-md);border-radius:var(--radius-md);background:#10b98114;border:1px solid #10b98126}.result-rate-label{color:var(--color-text-secondary);margin-bottom:var(--space-xs);font-size:.8rem;display:block}.result-rate-value{background:linear-gradient(135deg, var(--color-success), var(--color-accent));-webkit-text-fill-color:transparent;background-clip:text;font-size:2rem;font-weight:800}.result-actions{gap:var(--space-sm);display:flex}@media (width<=480px){.result-comparison{flex-direction:column}.result-arrow{transform:rotate(90deg)}.result-actions{flex-direction:column}}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:.95rem;font-weight:600;font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;outline:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn--primary{background:var(--gradient-primary);color:#fff;flex:1;box-shadow:0 4px 16px #7c3aed40}.btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px #7c3aed59}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--secondary{color:var(--color-text-secondary);background:0 0;border:1px solid #ffffff1a;flex:1}.btn--secondary:hover:not(:disabled){color:var(--color-text);background:#ffffff0d;border-color:#fff3}.btn--compress{width:100%;padding:var(--space-md) var(--space-xl);background:var(--gradient-primary);color:#fff;font-size:1.05rem;position:relative;overflow:hidden;box-shadow:0 4px 20px #7c3aed4d}.btn--compress:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 30px #7c3aed66}.btn--compress:active:not(:disabled){transform:translateY(0)}.btn--compress:after{content:"";background:linear-gradient(45deg,#0000 30%,#ffffff14 50%,#0000 70%);width:200%;height:200%;animation:3s ease-in-out infinite btnShine;position:absolute;top:-50%;left:-50%}@keyframes btnShine{0%{transform:translate(-100%)rotate(45deg)}to{transform:translate(100%)rotate(45deg)}}.tab-nav{background:var(--color-bg-card);border-radius:var(--radius-lg);margin-bottom:var(--space-xl);border:1px solid #ffffff0d;padding:4px;display:flex;position:relative}.tab-btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);color:var(--color-text-muted);font-family:var(--font-sans);cursor:pointer;transition:color var(--transition-fast);z-index:2;background:0 0;border:none;flex:1;font-size:.95rem;font-weight:600;display:flex;position:relative}.tab-btn:hover{color:var(--color-text-secondary)}.tab-btn--active{color:var(--color-text)}.tab-icon{font-size:1.1rem}.tab-label{white-space:nowrap}.tab-indicator{background:var(--gradient-primary);border-radius:var(--radius-md);opacity:.15;height:calc(100% - 8px);transition:left var(--transition-normal), width var(--transition-normal);z-index:1;position:absolute;top:4px;left:0}@media (width<=480px){.tab-btn{padding:var(--space-sm) var(--space-md);font-size:.85rem}}.footer{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--color-text-muted);border-top:1px solid #ffffff0a;font-size:.8rem}