Green 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:#f1f8f2"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#f1f8f2</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-100</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#e3f1e6"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#e3f1e6</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-200</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#c6e3ca"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#c6e3ca</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-300</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#8cd494"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#8cd494</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-400</div></div></div></div><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">Green 500</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">기준 초록 (Primary)</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-green-500</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#469d3f"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#469d3f</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-600</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#3b8536"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#3b8536</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-700</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#306d2c"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#306d2c</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-800</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#255622"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#255622</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-900</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#1a3e19"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Green 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">#1a3e19</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-green-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:#f1f8f2" title="Green 100 - #f1f8f2"><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:#e3f1e6" title="Green 200 - #e3f1e6"><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:#c6e3ca" title="Green 300 - #c6e3ca"><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:#8cd494" title="Green 400 - #8cd494"><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:#51B848" title="Green 500 - #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">500</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#469d3f" title="Green 600 - #469d3f"><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:#3b8536" title="Green 700 - #3b8536"><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:#306d2c" title="Green 800 - #306d2c"><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:#255622" title="Green 900 - #255622"><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:#1a3e19" title="Green 1000 - #1a3e19"><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>