Gray 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:#F9FAF9"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#F9FAF9</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-100</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#f1f3f1"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#f1f3f1</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-200</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#e8eae8"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#e8eae8</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-300</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#d4d7d4"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#d4d7d4</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-400</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">Gray 500</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-gray-500</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#5A5D5D"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#5A5D5D</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-600</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#484c48"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#484c48</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-700</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#2F2F2F"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#2F2F2F</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-800</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#232323"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#232323</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-900</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#171717"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Gray 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">#171717</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-gray-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:#F9FAF9" title="Gray 100 - #F9FAF9"><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:#f1f3f1" title="Gray 200 - #f1f3f1"><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:#e8eae8" title="Gray 300 - #e8eae8"><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:#d4d7d4" title="Gray 400 - #d4d7d4"><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:#b8bdb8" title="Gray 500 - #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">500</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#5A5D5D" title="Gray 600 - #5A5D5D"><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:#484c48" title="Gray 700 - #484c48"><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:#2F2F2F" title="Gray 800 - #2F2F2F"><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:#232323" title="Gray 900 - #232323"><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:#171717" title="Gray 1000 - #171717"><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>