@font-face {
    font-family: "Pretendard Variable";
    src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
}
@font-face {
    font-family: "Inter Variable";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --jx-space-1: 4px;
    --jx-space-2: 8px;
    --jx-space-3: 12px;
    --jx-space-4: 16px;
    --jx-space-6: 24px;
    --jx-space-8: 32px;
    --jx-space-10: 40px;
    --jx-space-12: 48px;
    --jx-radius-control: 8px;
    --jx-radius-card: 12px;
    --jx-content-max: 1440px;
    --jx-workspace-max: 1920px;
    --jx-reading-max: 960px;
    --jx-form-max: 720px;
    --jx-control-height: 42px;
    --jx-touch-target: 44px;
    --jx-table-cell-padding-block: 12px;
    --jx-table-cell-padding-inline: 16px;
    --jx-table-dense-padding-block: 12px;
    --jx-table-dense-padding-inline: 10px;
    --jx-table-action-height: 32px;
    --jx-table-action-hit-target: 44px;
    --jx-shadow-float: 0 14px 36px rgb(7 27 48 / 14%);
    --jx-font-ko: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
    --jx-font-en: "Inter Variable", Inter, Arial, sans-serif;
    --jx-font-code: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --bg: var(--jx-bg-page);
    --surface: var(--jx-bg-surface);
    --primary: var(--jx-color-primary);
    --primary-muted: var(--jx-color-primary-hover);
    --text: var(--jx-text-primary);
    --text-muted: var(--jx-text-muted);
    --border: var(--jx-border);
    --danger: var(--jx-danger-fg);
}

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

html {
    min-width: 320px;
    color-scheme: light;
    scroll-padding-top: 76px;
}

body {
    min-width: 320px;
    margin: 0;
    background: var(--jx-bg-page);
    color: var(--jx-text-primary);
    font-family: var(--jx-font-ko);
    font-size: 14px;
    line-height: 22px;
    overflow-wrap: break-word;
    word-break: normal;
}

:lang(en) { font-family: var(--jx-font-en); }
code, kbd, samp, .jx-code, [data-paper-number] { font-family: var(--jx-font-code); }
.jx-url, .jx-payload, .jx-code, code, [data-wrap-anywhere] { overflow-wrap: anywhere; word-break: normal; }

a { color: var(--jx-color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jx-color-primary-hover); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]) { scroll-margin: 84px; }
:focus-visible {
    outline: 3px solid var(--jx-focus-ring);
    outline-offset: 2px;
}
[hidden], .jx-hidden { display: none !important; }

.jx-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}