:root {
    --app-max-width: 1200px;
    --app-page-gutter: 16px;
    --app-page-gutter-mobile: 10px;
    --app-bg:
        radial-gradient(circle at top left, rgba(232, 154, 86, 0.22), transparent 30%),
        radial-gradient(circle at top right, rgba(113, 156, 148, 0.18), transparent 26%),
        linear-gradient(160deg, #f4efe6 0%, #f8f3eb 44%, #e5dccd 100%);
    --app-text: #2d241c;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    color: var(--app-text);
    font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--app-bg);
}

.app-shell {
    width: calc(100% - (var(--app-page-gutter) * 2));
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.app-page {
    padding: 28px 0 56px;
}

@media (max-width: 640px) {
    .app-shell {
        width: calc(100% - (var(--app-page-gutter-mobile) * 2));
        max-width: var(--app-max-width);
    }

    .app-page {
        padding-top: 12px;
    }
}