*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--text:#e4e4e7;--text-sub:#71717a;--text-muted:#52525b;--text-hint:#3f3f46;--accent:#6366f1;--accent2:#8b5cf6;--accent-light:#a78bfa;--accent-soft:#818cf8;--surface:#ffffff08;--surface-border:#ffffff0f;--surface-hover:#ffffff1a;--drop-bg:linear-gradient(145deg, #6366f10f, #8b5cf60a);--drop-bg-hover:linear-gradient(145deg, #6366f11a, #8b5cf614);--drop-border:linear-gradient(145deg, #6366f14d, #8b5cf61a, transparent);--drop-border-hover:linear-gradient(145deg, #6366f199, #8b5cf64d, transparent);--drop-glow:#6366f114;--spinner-track:#6366f126;--spinner-glow:#6366f126;--btn-secondary-bg:#ffffff0f;--btn-secondary-border:#ffffff14;--btn-secondary-text:#a1a1aa;--btn-secondary-text-hover:#e4e4e7;--checker-color:#18181b;--checker-bg:#111113}@media (prefers-color-scheme:light){:root{--bg:#f8f8fa;--text:#1d1d1f;--text-sub:#6e6e73;--text-muted:#86868b;--text-hint:#aeaeb2;--surface:#00000005;--surface-border:#0000000f;--surface-hover:#0000000d;--drop-bg:linear-gradient(145deg, #6366f10a, #8b5cf605);--drop-bg-hover:linear-gradient(145deg, #6366f114, #8b5cf60d);--drop-border:linear-gradient(145deg, #6366f133, #8b5cf614, transparent);--drop-border-hover:linear-gradient(145deg, #6366f180, #8b5cf640, transparent);--drop-glow:#6366f10d;--spinner-track:#6366f11f;--spinner-glow:#6366f11a;--btn-secondary-bg:#0000000a;--btn-secondary-border:#00000014;--btn-secondary-text:#6e6e73;--btn-secondary-text-hover:#1d1d1f;--checker-color:#e0e0e3;--checker-bg:#ebebed}}body{background:var(--bg);color:var(--text);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px 20px 0;font-family:-apple-system,Noto Sans KR,system-ui,sans-serif;transition:background .3s,color .3s;display:flex;overflow-x:hidden}.container{text-align:center;width:100%;max-width:960px}h1{background:linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-soft));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;margin-top:40px;margin-bottom:8px;font-size:3rem;font-weight:800}.subtitle{color:var(--text-sub);margin-bottom:48px;font-size:1.05rem;font-weight:400}.drop-zone{cursor:pointer;background:var(--drop-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:none;border-radius:24px;padding:80px 40px;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.drop-zone:before{content:"";background:var(--drop-border);-webkit-mask-composite:xor;pointer-events:none;border-radius:24px;padding:1.5px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.drop-zone:after{content:"";background:radial-gradient(circle at center, var(--drop-glow), transparent 60%);opacity:0;pointer-events:none;width:200%;height:200%;transition:opacity .4s;position:absolute;top:-50%;left:-50%}.drop-zone:hover:after,.drop-zone.drag-over:after{opacity:1}.drop-zone:hover,.drop-zone.drag-over{background:var(--drop-bg-hover);transform:translateY(-2px)}.drop-zone:hover:before,.drop-zone.drag-over:before{background:var(--drop-border-hover)}.drop-zone-content{z-index:1;color:var(--text-sub);flex-direction:column;align-items:center;gap:20px;transition:color .3s;display:flex;position:relative}.drop-zone:hover .drop-zone-content,.drop-zone.drag-over .drop-zone-content{color:var(--accent-light)}.drop-zone-content svg{stroke-width:1.2px;filter:drop-shadow(0 0 12px #6366f133);width:56px;height:56px}.drop-zone-content p{font-size:1.1rem;line-height:1.7}.drop-zone-hint{color:var(--text-hint);letter-spacing:.05em;text-transform:uppercase;font-size:.8rem}.loading{padding:80px 20px}.spinner{border:3px solid var(--spinner-track);border-top-color:var(--accent-soft);width:48px;height:48px;box-shadow:0 0 24px var(--spinner-glow);border-radius:50%;margin:0 auto 24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:var(--text-sub);font-size:1.1rem}.progress-text{letter-spacing:.02em;margin-top:12px;font-family:SF Mono,Fira Code,monospace;color:var(--text-muted)!important;font-size:.85rem!important}.result{animation:.5s cubic-bezier(.4,0,.2,1) fadeUp}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.comparison{gap:16px;margin-bottom:28px;display:flex}.image-box{background:var(--surface);border:1px solid var(--surface-border);border-radius:20px;flex:1;padding:20px;transition:border-color .3s}.image-box:hover{border-color:#6366f133}.image-box h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;font-size:.75rem;font-weight:600}.image-box img{object-fit:contain;border-radius:12px;width:100%;max-height:420px}.result-box img{background-image:linear-gradient(45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-color) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;background-color:var(--checker-bg)}.actions{justify-content:center;gap:12px;display:flex}.btn{cursor:pointer;letter-spacing:.01em;border:none;border-radius:14px;padding:14px 32px;font-size:.95rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;box-shadow:0 4px 20px #6366f14d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px #6366f173}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--btn-secondary-border)}.btn-secondary:hover{background:var(--surface-hover);color:var(--btn-secondary-text-hover);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.cafe-footer{text-align:center;width:100%;margin-top:auto;padding:32px 20px}.cafe-banner{background:linear-gradient(135deg,#03c75a14,#03c75a0a);border:1px solid #03c75a26;border-radius:14px;justify-content:center;align-items:center;gap:12px;padding:16px 28px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.cafe-banner:hover{background:linear-gradient(135deg,#03c75a1f,#03c75a0f);border-color:#03c75a4d;transform:translateY(-2px)}.cafe-banner-label{letter-spacing:.08em;color:#03c75a;background:#03c75a1f;border-radius:6px;padding:4px 8px;font-size:.7rem;font-weight:700}.cafe-banner-text{color:var(--text-sub);font-size:.95rem;font-weight:500}.cafe-banner svg{color:var(--text-muted);flex-shrink:0}.cafe-banner:hover .cafe-banner-text{color:var(--text)}.cafe-banner:hover svg{color:#03c75a}@media (width<=640px){h1{font-size:2.2rem}.subtitle{margin-bottom:32px;font-size:.95rem}.drop-zone{border-radius:20px;padding:56px 20px}.comparison{flex-direction:column}.image-box img{max-height:280px}.actions{flex-direction:column}.btn{width:100%}}