Red Palette

<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:#fef2f2"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 100</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">#fef2f2</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-100</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#fde8e8"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 200</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">#fde8e8</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-200</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#fbb4b4"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 300</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">#fbb4b4</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-300</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#f87171"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 400</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">#f87171</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-400</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">Red 500</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">기준 빨강 (Error)</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-red-500</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#dc2626"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 600</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">#dc2626</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-600</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#b91c1c"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 700</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">#b91c1c</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-700</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#991b1b"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 800</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">#991b1b</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-800</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#7f1d1d"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 900</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">#7f1d1d</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-900</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#5b1313"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Red 1000</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">#5b1313</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-red-1000</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:#fef2f2" title="Red 100 - #fef2f2"><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">100</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#fde8e8" title="Red 200 - #fde8e8"><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">200</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#fbb4b4" title="Red 300 - #fbb4b4"><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">300</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#f87171" title="Red 400 - #f87171"><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">400</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#E03A3A" title="Red 500 - #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">500</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#dc2626" title="Red 600 - #dc2626"><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">600</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#b91c1c" title="Red 700 - #b91c1c"><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">700</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#991b1b" title="Red 800 - #991b1b"><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">800</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#7f1d1d" title="Red 900 - #7f1d1d"><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">900</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#5b1313" title="Red 1000 - #5b1313"><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">1000</span></div></div></div></div></div>