*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;min-height:100vh}:root{--primary-color: #e6a4a0;--primary-light: #ffb8b4;--primary-dark: #d88884;--bg-color: #1a1a1a;--bg-secondary: #252525;--text-color: #f0f0f0;--text-muted: #888;--font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif}body{margin:0;padding:0;font-family:var(--font-family);background:linear-gradient(135deg,#0d0d0d,#1a1a1a,#0d0d0d);background-attachment:fixed;color:var(--text-color);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.8}.app-container{max-width:900px;margin:0 auto;padding:80px 24px;text-align:center}.header{margin-bottom:60px}.header h1{font-size:4rem;font-weight:800;margin-bottom:20px;background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 50%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em;animation:fadeInDown .8s ease-out}.header p{font-size:1.3rem;color:var(--text-muted);font-weight:400;letter-spacing:.02em;animation:fadeInUp .8s ease-out .2s both}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.uploader-container{position:relative;border:2px dashed #444;border-radius:24px;padding:80px 24px;background:var(--bg-secondary);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;margin-bottom:60px;box-shadow:0 8px 32px #0000004d;animation:fadeInUp .6s ease-out .4s both}.uploader-container:hover{border-color:var(--primary-color);background:#2a2a2a;box-shadow:0 12px 40px #e6a4a026;transform:translateY(-4px)}.uploader-container.dragging{border-color:var(--primary-light);background:#2f2525;box-shadow:0 16px 48px #e6a4a033;transform:scale(1.02)}.icon-wrapper{background:linear-gradient(135deg,#2a2a2a,#333);padding:24px;border-radius:50%;box-shadow:0 8px 24px #0006;margin-bottom:32px;transition:all .3s ease}.uploader-container:hover .icon-wrapper{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 32px #e6a4a033}.uploader-container h3{font-size:1.4rem;font-weight:600;margin-bottom:12px;color:var(--text-color);text-align:center}.uploader-container p{font-size:1rem;color:var(--text-muted);text-align:center}.preview-container{margin-bottom:60px;border-radius:20px;overflow:hidden;box-shadow:0 16px 48px #0006;border:1px solid #333}.preview-image{width:100%;max-height:500px;object-fit:contain;background-color:#111;display:block}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;margin-top:60px}.color-card{background:var(--bg-secondary);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #0000004d;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border:1px solid #333}.color-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #00000080;border-color:var(--primary-color)}.color-swatches{display:flex;height:140px}.swatch{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;font-size:.85rem;font-weight:500;color:#ffffffe6;text-shadow:0 1px 3px rgba(0,0,0,.4)}.card-info{padding:24px;text-align:left}.korean-name{font-size:1.3rem;font-weight:700;margin-bottom:8px;color:var(--text-color)}.hex-code{font-family:SF Mono,Monaco,Consolas,monospace;color:var(--text-muted);font-size:.9rem;margin-bottom:16px}.match-score{display:inline-block;padding:6px 12px;background-color:#333;border-radius:6px;font-size:.85rem;font-weight:600;color:var(--text-muted)}.match-score.high{background-color:#1a3a1a;color:#6fcf6f}.reset-button{margin-top:60px;padding:16px 40px;background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));color:#111;border:none;border-radius:28px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #e6a4a04d}.reset-button:hover{background:linear-gradient(135deg,var(--primary-color),var(--primary-light));box-shadow:0 8px 24px #e6a4a066;transform:translateY(-2px)}.attribution{margin-top:80px;padding:40px 24px;border-top:1px solid #333;text-align:center}.attribution-title{font-size:.9rem;font-weight:600;color:var(--text-muted);margin-bottom:16px;letter-spacing:.1em;text-transform:uppercase}.attribution-text{font-size:.95rem;color:var(--text-muted);line-height:1.8;margin-bottom:12px}.attribution-text a{color:var(--primary-color);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s ease}.attribution-text a:hover{color:var(--primary-light);border-bottom-color:var(--primary-light)}.attribution-method{font-size:.85rem;color:#666;line-height:1.8}.loading-text{font-size:1.1rem;color:var(--text-muted);margin-top:40px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media(max-width:768px){.app-container{padding:40px 16px}.header{margin-bottom:36px}.header h1{font-size:2.5rem}.header p{font-size:1rem}.uploader-container{padding:48px 16px;min-height:200px;margin-bottom:36px;border-radius:16px}.uploader-container h3{font-size:1.1rem}.icon-wrapper{padding:16px;margin-bottom:20px}.preview-container{margin-bottom:36px;border-radius:12px}.preview-image{max-height:300px}.results-grid{grid-template-columns:1fr;gap:16px;margin-top:36px}.color-swatches{height:100px}.card-info{padding:16px}.korean-name{font-size:1.1rem}.reset-button{margin-top:36px;padding:14px 32px;font-size:1rem;width:100%}.attribution{margin-top:48px;padding:24px 16px}}@media(max-width:480px){.header h1{font-size:2rem}.swatch{font-size:.75rem}}