/* C common visual foundation. Based on the active Workflow design language. */
:root {
    --tw-bg: #ffffff;
    --tw-bg-soft: #fafafa;
    --tw-bg-hover: #f4f5f7;
    --tw-border: #ebedf0;
    --tw-border-strong: #e1e4e8;
    --tw-text: #0d121c;
    --tw-text-secondary: #3b4252;
    --tw-text-muted: #6b7280;
    --tw-text-faint: #9ba1a6;
    --tw-accent: #5e6ad2;
    --tw-accent-hover: #4f5ac3;
    --tw-accent-soft: #eef0ff;
    --tw-danger: #eb5757;
    --tw-radius-sm: 4px;
    --tw-radius-md: 6px;
    --tw-radius-lg: 10px;
    --tw-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    --tw-font: "Noto Sans Korean", "Pretendard", -apple-system, BlinkMacSystemFont,
        "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    --tw-ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--tw-text);
    font-family: var(--tw-font);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font: inherit;
}

button, a, input, select, textarea {
    transition: border-color 100ms var(--tw-ease), background-color 100ms var(--tw-ease),
        color 100ms var(--tw-ease), box-shadow 100ms var(--tw-ease);
}

:focus-visible {
    outline: 2px solid var(--tw-accent);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}