@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: "Pretendard", system-ui, sans-serif;
    }

    body {
        color: var(--text);
        background-color: var(--bg);
    }
}

@layer utilities {
    [x-cloak] {
        display: none !important;
    }

    .rounded-theme {
        border-radius: 18px;
    }

    .border-brd {
        border-color: var(--border);
    }

    .bg-bgr-tone {
        background-color: var(--surface-muted);
    }

    .text-typ {
        color: var(--text);
    }

    .text-typ-tone {
        color: var(--text-soft);
    }

    .bg-accent {
        background: var(--color-accent);
    }

    .gap-0\.75 {
        gap: 0.1875rem;
    }

    .flex-2 {
        flex: 2 1 0%;
    }

    .flex-3 {
        flex: 3 1 0%;
    }

    .flex-4 {
        flex: 4 1 0%;
    }

    .size-3\.5 {
        width: 0.875rem;
        height: 0.875rem;
    }

    .size-4 {
        width: 1rem;
        height: 1rem;
    }

    .min-w-16 {
        min-width: 4rem;
    }

    .max-w-content {
        max-width: var(--content-header);
    }

    .line-clamp-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}