:root {
    --bg: #0f0d12;
    --surface: rgba(26, 23, 32, 0.88);
    --text: #f4efe9;
    --muted: #b6b1a9;
    --line: rgba(255, 255, 255, 0.12);
    --accent: #f7a8a5;
    --accent-strong: #fdd4b1;
    --font-display: "DM Serif Display", "Noto Serif KR", serif;
    --font-body: "Manrope", "Noto Sans KR", sans-serif;
}

.app-shell {
    min-height: 100vh;
}

.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

@media (max-width: 768px) {
    .site-main {
        padding: 20px 16px 60px;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-main > * {
    animation: fadeUp 0.6s ease both;
}

.button {
    border: 1px solid var(--line);
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.06);
}

.button:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.button.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #1a1414;
    border-color: transparent;
}

.button.ghost {
    background: transparent;
}