:root{--color-primary: #2c7be5;--color-primary-hover: #1e5bb8;--color-primary-light: #e8f0fe;--color-success: #10b981;--color-error: #ef4444;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-tertiary: #9ca3af;--color-background: #fafbfc;--color-surface: #ffffff;--color-border: #e5e7eb;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .03);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 10px 10px -5px rgba(0, 0, 0, .02);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Pretendard,Segoe UI,Roboto,Noto Sans KR,Malgun Gothic,sans-serif;line-height:var(--line-height-normal);font-weight:var(--font-weight-normal);color:var(--color-text-primary);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes slideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}.container{max-width:680px;margin:0 auto;padding:var(--spacing-3xl) var(--spacing-xl);animation:fadeIn var(--transition-slow)}h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md);color:var(--color-text-primary);line-height:var(--line-height-tight);letter-spacing:-.025em}.description{color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl);font-size:var(--font-size-base);line-height:var(--line-height-relaxed)}.search-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.filters{display:flex;gap:var(--spacing-md)}.field-group{display:flex;flex:1;flex-direction:column;gap:var(--spacing-xs)}.field-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.select{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--color-surface);color:var(--color-text-primary);box-shadow:var(--shadow-md);cursor:pointer;transition:all var(--transition-base);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M10.293 3.293 6 7.586 1.707 3.293A1 1 0 0 0 .293 4.707l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-lg) center;padding-right:calc(var(--spacing-lg) * 2.5);min-height:48px}.select:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-1px)}.select:focus{outline:none;box-shadow:0 0 0 3px var(--color-primary-light),var(--shadow-lg)}.select:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6;transform:none}.search-row{display:flex;gap:var(--spacing-md);align-items:flex-end}.search-field{min-width:0}.search-input{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--color-surface);color:var(--color-text-primary);box-shadow:var(--shadow-md);transition:all var(--transition-base);min-height:48px}.search-input:hover{box-shadow:var(--shadow-lg)}.search-input:focus{outline:none;box-shadow:0 0 0 3px var(--color-primary-light),var(--shadow-lg)}.search-input::placeholder{color:var(--color-text-tertiary)}.search-button{padding:var(--spacing-md) var(--spacing-2xl);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-md);transition:all var(--transition-base);min-height:48px;min-width:100px}.search-button:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.search-button:active{transform:translateY(0)}.search-button[aria-busy=true]{background:linear-gradient(135deg,var(--color-primary-hover) 0%,var(--color-primary) 100%)}.error{color:var(--color-error);margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:#fef2f2;border-radius:var(--radius-md);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);box-shadow:var(--shadow-sm)}.results{margin-top:var(--spacing-3xl);animation:fadeIn var(--transition-slow)}.results h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xl);text-align:left;color:var(--color-text-primary)}.result-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-lg)}.result-item{padding:var(--spacing-xl);border:none;border-radius:var(--radius-lg);text-align:left;background:var(--color-surface);box-shadow:var(--shadow-md);transition:all var(--transition-base);animation:slideIn var(--transition-slow) backwards}.result-item:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.result-item:nth-child(1){animation-delay:0ms}.result-item:nth-child(2){animation-delay:60ms}.result-item:nth-child(3){animation-delay:.12s}.result-item:nth-child(4){animation-delay:.18s}.result-item:nth-child(5){animation-delay:.24s}.result-item:nth-child(n+6){animation-delay:.3s}.result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-lg);gap:var(--spacing-lg)}.item-name{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);color:var(--color-text-primary);line-height:var(--line-height-tight);flex:1}.similarity{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-primary);background:var(--color-primary-light);padding:.375rem var(--spacing-md);border-radius:var(--radius-full);white-space:nowrap;flex-shrink:0}.result-details{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.category{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background:#f3f4f6;padding:.375rem var(--spacing-md);border-radius:var(--radius-full)}.spec{font-size:var(--font-size-sm);color:var(--color-text-tertiary);display:flex;align-items:center}.result-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-lg);border-top:1px solid #f3f4f6}.location{font-size:var(--font-size-sm);color:var(--color-text-tertiary);display:flex;align-items:center}.fee{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-success)}.empty-state{text-align:center;padding:var(--spacing-3xl);color:var(--color-text-tertiary);font-size:var(--font-size-base);animation:fadeIn var(--transition-slow)}.empty-state-icon{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-lg);opacity:.5}@media(max-width:640px){.container{padding:var(--spacing-2xl) var(--spacing-lg)}h1{font-size:var(--font-size-2xl)}.filters,.search-row{flex-direction:column;gap:var(--spacing-md)}.search-button{width:100%}.result-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.similarity{align-self:flex-start}.result-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:rotate .6s linear infinite;margin-right:var(--spacing-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
