Semantic Colors

<div class="space-y-6"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#51B848"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Primary</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">메인 브랜드 컬러</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#51B848</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-semantic-primary</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#2563eb"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Success</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">성공 상태 컬러</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#2563eb</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-semantic-success</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#FFEB00"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Warning</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">경고 상태 컬러</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#FFEB00</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-semantic-warning</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#E03A3A"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Error</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">에러 상태 컬러</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#E03A3A</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-semantic-error</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#b8bdb8"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Secondary</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">보조 컬러</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#b8bdb8</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-semantic-secondary</div></div></div></div></div><div class="mt-8"><h3 class="typography-headline3-bold mb-4">Color Strip</h3><div class="flex h-16 rounded-lg overflow-hidden border border-semantic-border"><div class="flex-1 relative group cursor-pointer" style="background-color:#51B848" title="Primary - #51B848"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">Primary</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#2563eb" title="Success - #2563eb"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">Success</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#FFEB00" title="Warning - #FFEB00"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">Warning</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#E03A3A" title="Error - #E03A3A"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">Error</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#b8bdb8" title="Secondary - #b8bdb8"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">Secondary</span></div></div></div></div></div>