:root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-muted: #fafafa;
    --color-border: #d9dee3;
    --color-border-strong: #c5ccd3;

    --color-text: #222;
    --color-text-muted: #666;
    --color-text-light: #888;

    --color-primary: #64b5f6;
    --color-primary-hover: #55a7ea;

    --color-neutral: #cfd8dc;
    --color-neutral-hover: #c1cbd0;

    --color-negative: #e57373;
    --color-negative-hover: #da6666;

    --color-success: #81c784;
    --color-success-hover: #74bb77;

    --color-dark: #000000;
    --color-light: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    --line-height-base: 1.5;
    --line-height-tight: 1.3;

    --content-width-sm: 480px;
    --content-width-md: 800px;
    --content-width-lg: 1100px;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    background: var(--color-bg);
    color: var(--color-text);
}

a:hover {
    text-decoration: none;
}

strong,
b {
    font-weight: 700;
}

small {
    font-size: var(--font-size-sm);
}


code,
pre {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

pre {
    overflow: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}


.small-light {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}