* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Literata', serif; background: #FAF6F0; color: #5C4A3A; line-height: 1.8; font-size: 16px; }
h1, h2 { font-family: 'Fraunces', serif; color: #3B2F2F; }

.hero { height: 100vh; min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #FAF6F0; }
.hero-landscape { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; }
.hill-back { animation: fadeLayer 0.6s 0.4s ease forwards; }
.hill-mid { animation: fadeLayer 0.6s 0.8s ease forwards; }
.tree-trunk, .tree-crown { animation: fadeLayer 0.6s 1.2s ease forwards; }
.fence { animation: fadeLayer 0.6s 1.6s ease forwards; }
@keyframes fadeLayer { to { opacity: 1; } }

.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-title { font-family: 'Noto Serif KR', serif; font-size: 48px; font-weight: 500; color: #3B2F2F; margin-bottom: 12px; }
.hero-title .char { display: inline-block; font-weight: 100; animation: inkPress 0.08s forwards; }
@keyframes inkPress { to { font-weight: 600; } }
.hero-sub { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 16px; color: #8A7B6B; letter-spacing: 0.04em; opacity: 0; animation: fadeIn 0.6s 2.2s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.garden-fence-divider { max-width: 800px; margin: 0 auto; padding: 16px 24px; }
.garden-fence-divider svg { width: 100%; height: 24px; }

.debate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }

.debate-card { background: #FAF6F0; border-radius: 12px; box-shadow: 0 2px 12px rgba(92, 71, 50, 0.08); padding: 24px; position: relative; overflow: hidden; opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease-out, transform 0.5s ease-out, background 0.3s ease; border-top: 3px solid #C4956A; }
.debate-card.visible { opacity: 1; transform: translateY(0); }
.debate-card:hover { background: #E8D5C0; }
.debate-card:hover .botanical-svg { filter: drop-shadow(0 0 3px rgba(123, 158, 107, 0.3)); }
.debate-card:hover .ladybug { animation: ladybugCrawl 2s linear forwards; }

.card-botanical { height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.botanical-svg { width: 120px; height: 80px; transition: filter 0.3s ease; }
.plant-stroke path, .plant-stroke circle, .plant-stroke ellipse { stroke-dasharray: 200; stroke-dashoffset: 200; }
.debate-card.visible .plant-stroke path,
.debate-card.visible .plant-stroke circle,
.debate-card.visible .plant-stroke ellipse { animation: drawStroke 0.8s ease forwards; }
.debate-card.visible .circuit-veins path { animation: drawStroke 0.6s 1.1s ease forwards; stroke-dasharray: 100; stroke-dashoffset: 100; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }

.card-category { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.04em; color: #8A7B6B; display: block; margin-bottom: 8px; }
.card-title { font-size: 22px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.card-excerpt { font-size: 15px; color: #5C4A3A; margin-bottom: 16px; }
.card-footer { display: flex; align-items: center; gap: 8px; }
.status-icon { font-size: 14px; }
.status-icon.blooming { color: #C4956A; }
.status-icon.growing { color: #7B9E6B; }
.status-icon.concluded { color: #8A7B6B; }
.card-meta { font-family: 'Nunito', sans-serif; font-weight: 300; font-size: 13px; color: #8A7B6B; letter-spacing: 0.04em; }

@keyframes ladybugCrawl { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }

.seed-nav { position: fixed; bottom: 24px; right: 24px; z-index: 100; }
.seed-btn { width: 48px; height: 48px; border-radius: 50%; background: #FAF6F0; border: 1px solid #C4956A; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(92, 71, 50, 0.12); transition: transform 0.3s ease; }
.seed-btn:hover { transform: scale(1.1); }
.seed-menu { position: absolute; bottom: 60px; right: 0; background: #FAF6F0; border: 1px solid #E8D5C0; border-radius: 12px; padding: 8px; box-shadow: 0 4px 16px rgba(92, 71, 50, 0.12); display: none; min-width: 180px; }
.seed-menu.open { display: block; }
.seed-item { display: block; padding: 8px 16px; font-family: 'Nunito', sans-serif; font-size: 14px; color: #5C4A3A; text-decoration: none; border-radius: 8px; transition: background 0.2s ease; }
.seed-item:hover { background: #A4C3A2; color: #3B2F2F; }

/* Palette: #7B9E6B #C4956A #A4C3A2 */
@media (max-width: 600px) {
    .hero-title { font-size: 36px; }
    .debate-grid { grid-template-columns: 1fr; }
}