韩式极简

You are a Korean Minimal design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- High saturation pure colors (bg-red-500, bg-blue-600, bg-green-500)
- Thick borders (border-2, border-4)
- Heavy shadows (shadow-xl, shadow-2xl)
- Uppercase text and ultra-wide tracking (uppercase tracking-widest)
- Dark/black backgrounds (bg-black, bg-[#0a0a0a])
- Neon or fluorescent colors
- Excessive decorations or visual clutter

## Must Follow

- Warm white background bg-[#faf9f7]
- Slate blue text text-[#3d4a5c]
- Generous whitespace and padding (p-8, p-10, p-12)
- Delicate rounded corners rounded-2xl
- Ultra-thin borders border border-[#3d4a5c]/8 or /10
- Soft subtle shadows shadow-sm
- Light font weights font-light or font-normal
- Wide but gentle tracking tracking-wide

## Color Palette

Primary:
- Slate Blue: #3d4a5c
- Warm White: #faf9f7
- Blush Pink: #d4a5a5
- Sage Green: #a8c5b8
- Sand: #e8d4b8

## Design Principles

- Whitespace is the primary design element
- Less is always more
- Subtle is always better than obvious
- Every element must have room to breathe
- Decorations should be minimal (thin lines, small dots)

## Animation & Interaction Rules

- Lazy Breathing: 过渡建议使用 duration-700 以上与 ease-in-out，保持慵懒平稳，不做短促反馈。
- Micro Lift: hover 位移保持在 -translate-y-0.5 量级，通过超浅暖色阴影扩散表达层次。
- Muted Whisper: 文字与边框只做同色系微差过渡，避免高对比跳色破坏安静氛围。
- Soft Press: active 反馈优先使用背景轻微加深，不依赖明显缩放与弹跳。

/* Korean Minimal Global Styles */

:root {
  --km-slate-blue: #3d4a5c;
  --km-warm-white: #faf9f7;
  --km-blush: #d4a5a5;
  --km-sage: #a8c5b8;
  --km-sand: #e8d4b8;
}

/* Subtle card hover */
.km-card-hover {
  transition: all 0.3s ease;
}
.km-card-hover:hover {
  box-shadow: 0 4px 12px rgba(61, 74, 92, 0.06);
  transform: translateY(-1px);
}

/* Thin divider */
.km-divider {
  height: 1px;
  background-color: rgba(61, 74, 92, 0.1);
}

/* Blush accent */
.km-blush-accent {
  color: var(--km-blush);
}

/* Breathing spacing */
.km-breathe {
  padding: 3rem 2rem;
}

@media (min-width: 768px) {
  .km-breathe {
    padding: 5rem 3rem;
  }
}

/* Gentle focus ring */
.km-focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.15);
}
@keyframes korean-minimal-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes korean-minimal-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.korean-minimal-card {
  position: relative;
  overflow: hidden;
}

.korean-minimal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(61, 74, 92, 0.05), transparent);
  pointer-events: none;
}

.korean-minimal-card:hover::before {
  opacity: 1;
}

.korean-minimal-gradient {
  background: linear-gradient(135deg, #3d4a5c, #d4a5a5);
}

.korean-minimal-gradient-text {
  background: linear-gradient(135deg, #3d4a5c, #d4a5a5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.korean-minimal-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(61, 74, 92, 0.08);
}

.korean-minimal-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.korean-minimal-animate-in {
  animation: korean-minimal-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-[#3d4a5c]/8",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-[0_4px_12px_rgba(61,74,92,0.06)]",
    "lg": "shadow-[0_8px_24px_rgba(61,74,92,0.08)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_4px_12px_rgba(61,74,92,0.06)]",
    "focus": "focus:shadow-[0_0_0_3px_rgba(212,165,165,0.1)]",
    "colored": {
      "blush": "shadow-[0_4px_12px_rgba(212,165,165,0.12)]",
      "sage": "shadow-[0_4px_12px_rgba(168,197,184,0.12)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-in-out",
    "active": "active:scale-[0.98]",
    "hoverScale": "hover:translate-y-[-1px]"
  },
  "typography": {
    "heading": "font-light tracking-wide text-[#3d4a5c]",
    "body": "font-sans font-light",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-3xl md:text-5xl lg:text-6xl",
      "h1": "text-2xl md:text-4xl",
      "h2": "text-xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-6 md:px-10 lg:px-16",
    "card": "p-8 md:p-10",
    "gap": {
      "sm": "gap-4 md:gap-6",
      "md": "gap-6 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#faf9f7]",
      "secondary": "bg-[#faf9f7]/80",
      "accent": [
        "bg-[#d4a5a5]/10",
        "bg-[#a8c5b8]/10",
        "bg-[#e8d4b8]/10"
      ]
    },
    "text": {
      "primary": "text-[#3d4a5c]",
      "secondary": "text-[#3d4a5c]/60",
      "muted": "text-[#3d4a5c]/30"
    },
    "button": {
      "primary": "bg-[#3d4a5c] text-[#faf9f7]",
      "secondary": "bg-transparent text-[#3d4a5c] border border-[#3d4a5c]/15",
      "danger": "bg-[#d4a5a5] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "border-2",
      "border-4",
      "shadow-xl",
      "shadow-2xl",
      "bg-black",
      "bg-[#0a0a0a]",
      "bg-red-500",
      "bg-blue-600",
      "bg-green-500",
      "uppercase",
      "tracking-widest",
      "font-black",
      "font-extrabold",
      "text-[#00ffff]",
      "text-[#ff00ff]",
      "rounded-none"
    ],
    "patterns": [
      "^border-[2-4]$",
      "^shadow-(?:xl|2xl)$",
      "^bg-(?:black|\\[#0[0-9a-f]{5}\\])",
      "^bg-(?:red|blue|green|orange|purple)-[4-9]",
      "^font-(?:black|extrabold)$"
    ],
    "reasons": {
      "border-2": "Korean Minimal uses only thin single-pixel borders for delicacy",
      "shadow-xl": "Korean Minimal uses subtle shadows (shadow-sm) to maintain lightness",
      "bg-black": "Korean Minimal uses warm white backgrounds for a gentle atmosphere",
      "uppercase": "Korean Minimal avoids aggressive typography in favor of natural case",
      "rounded-none": "Korean Minimal uses soft rounded corners (rounded-2xl)",
      "font-extrabold": "Korean Minimal prefers light font weights (font-light, font-normal)"
    }
  },
  "required": {
    "button": [
      "rounded-2xl",
      "shadow-sm",
      "font-normal tracking-wide",
      "transition-all duration-300 ease-in-out"
    ],
    "card": [
      "rounded-2xl",
      "bg-[#faf9f7]",
      "border border-[#3d4a5c]/8",
      "shadow-sm"
    ],
    "input": [
      "rounded-2xl",
      "border border-[#3d4a5c]/10",
      "bg-[#faf9f7]",
      "text-[#3d4a5c]",
      "font-light tracking-wide",
      "focus:border-[#d4a5a5]/50",
      "focus:outline-none"
    ]
  }
}