html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1, #ffffff);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

.stack-vertical,
.stack-horizontal {
    box-sizing: border-box;
    min-width: 0;
}

app,
#app {
    display: block;
    min-height: 100%;
}

a {
    color: var(--neutral-foreground-rest);
}

a:hover {
    color: var(--neutral-foreground-rest);
    text-decoration: underline;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* */
.center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

body,
:root,
fluent-design-system-provider,
fluent-card,
fluent-select,
fluent-combobox,
fluent-option {
    /* ========================================
     ACCENT COLORS (브랜드/강조색) - 검정 테마
     React의 --primary: oklch(0.1 0 0) = #1a1a1a
     ======================================== */
    --accent-base-color: #000000;
    /* Accent Fill - 버튼 등 강조 요소 배경 */
    --accent-fill-rest: var(--accent-base-color);
    --accent-fill-hover: #313131;
    --accent-fill-active: #414141;
    --accent-fill-focus: #000000;
    /* Accent Foreground */
    --accent-foreground-rest: #1a1a1a;
    --accent-foreground-hover: #000000;
    --accent-foreground-active: #333333;
    --accent-foreground-focus: #000000;
    /*Accent Stroke Control*/
    --accent-stroke-control-rest: #1a1a1a;
    --accent-stroke-control-hover: #000000;
    --accent-stroke-control-active: #333333;
    --accent-stroke-control-focus: #000000;
    /* Foreground On Accent - 강조 버튼 위 텍스트 (흰색) */
    --foreground-on-accent-rest: #ffffff;
    --foreground-on-accent-hover: #ffffff;
    --foreground-on-accent-active: #ffffff;
    --foreground-on-accent-focus: #ffffff;
    --foreground-on-accent-large-rest: #ffffff;
    --foreground-on-accent-large-hover: #ffffff;
    --foreground-on-accent-large-active: #ffffff;
    --foreground-on-accent-large-focus: #ffffff;
    /* ========================================
     NEUTRAL COLORS (중립색) - 라이트 테마
     React의 --secondary/--muted: oklch(0.97 0 0) = #f7f7f7
     ======================================== */
    --neutral-base-color: #000000;
    /* Neutral Fill - Select, Input 등 배경 */
    --neutral-fill-rest: #ffffff;
    --neutral-fill-hover: #efefef;
    --neutral-fill-active: #cbcbcb;
    --neutral-fill-focus: #efefef;
    /* Neutral Fill Secondary */
    --neutral-fill-secondary-rest: #efefef;
    --neutral-fill-secondary-hover: #efefef;
    --neutral-fill-secondary-active: #e8e8e8;
    --neutral-fill-secondary-focus: #efefef;
    /* Neutral Fill Stealth - Ghost 버튼 */
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: #e9e9e9;
    --neutral-fill-stealth-active: #efefef;
    --neutral-fill-stealth-focus: #f7f7f7;
    /* Neutral Fill Input - 입력 필드 배경 */
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #fafafa;
    --neutral-fill-input-active: #ffffff;
    --neutral-fill-input-focus: #ffffff;
    --neutral-fill-input-alt-rest: #f7f7f7;
    --neutral-fill-input-alt-hover: #efefef;
    --neutral-fill-input-alt-active: #e8e8e8;
    --neutral-fill-input-alt-focus: #efefef;
    /* Neutral Fill Layer */
    --neutral-fill-layer-rest: #fafafa;
    --neutral-fill-layer-hover: #f5f5f5;
    --neutral-fill-layer-active: #f0f0f0;
    /* Neutral Fill Strong */
    --neutral-fill-strong-rest: #1a1a1a;
    --neutral-fill-strong-hover: #000000;
    --neutral-fill-strong-active: #333333;
    --neutral-fill-strong-focus: #000000;
    /* ========================================
     NEUTRAL LAYER COLORS
     ======================================== */
    --neutral-layer-1: #ffffff;
    --neutral-layer-2: #fafafa;
    --neutral-layer-3: #f7f7f7;
    --neutral-layer-4: #f2f2f2;
    --neutral-layer-card-container: #ffffff;
    --neutral-layer-floating: rgba(255, 255, 255, 0.9);
    /* ========================================
     NEUTRAL FOREGROUND COLORS
     ======================================== */
    --neutral-foreground-rest: #1a1a1a;
    --neutral-foreground-hover: #000000;
    --neutral-foreground-active: #333333;
    --neutral-foreground-focus: #000000;
    --neutral-foreground-hint: #636363;
    /* ========================================
     NEUTRAL STROKE/BORDER COLORS
     React의 --border: oklch(0.85 0 0) = #d4d4d4
     ======================================== */
    --neutral-stroke-rest: #c7c7c7;
    --neutral-stroke-hover: #c4c4c4;
    --neutral-stroke-active: #b4b4b4;
    --neutral-stroke-focus: #c4c4c4;
    --neutral-stroke-divider-rest: #c7c7c7;
    --neutral-stroke-layer-rest: #d4d4d4;
    --neutral-stroke-layer-hover: #c4c4c4;
    --neutral-stroke-layer-active: #b4b4b4;
    --neutral-stroke-input-rest: #c7c7c7;
    --neutral-stroke-input-hover: #b4b4b4;
    --neutral-stroke-input-active: #a4a4a4;
    --neutral-stroke-input-focus: #1a1a1a;
    --neutral-stroke-strong-rest: #636363;
    --neutral-stroke-strong-hover: #525252;
    --neutral-stroke-strong-active: #424242;
    /* ========================================
     CORNER RADIUS - 직각 스타일
     ======================================== */
    --control-corner-radius: 0;
    --layer-corner-radius: 0;
    /* ========================================
     STROKE WIDTH
     ======================================== */
    --stroke-width: 1;
    --focus-stroke-width: 2;
    /* ========================================
     FOCUS COLORS
     React의 --ring: oklch(0.5 0 0) = #7f7f7f
     ======================================== */
    /* --focus-stroke-outer: #1a1a1a;
    --focus-stroke-inner: #ffffff; */
    /* ========================================
     TYPOGRAPHY
     ======================================== */
    --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /*Type Ramp - Font Sizes*/
    --type-ramp-minus-2-font-size: 10px;
    --type-ramp-minus-2-line-height: 14px;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 22px;
    --type-ramp-plus-2-font-size: 18px;
    --type-ramp-plus-2-line-height: 24px;
    --type-ramp-plus-3-font-size: 20px;
    --type-ramp-plus-3-line-height: 26px;
    --type-ramp-plus-4-font-size: 24px;
    --type-ramp-plus-4-line-height: 30px;
    --type-ramp-plus-5-font-size: 32px;
    --type-ramp-plus-5-line-height: 40px;
    --type-ramp-plus-6-font-size: 40px;
    --type-ramp-plus-6-line-height: 48px;
    /* ========================================
     SPACING & LAYOUT
     ======================================== */
    --design-unit: 3;
    --base-height-multiplier: 10;
    --base-horizontal-spacing-multiplier: 3;
    --density: 0;
    --direction: ltr;
    /* ========================================
     ELEVATION / SHADOWS - 미니멀하게
     ======================================== */
    --elevation-shadow-card-rest: none;
    --elevation-shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.08);
    --elevation-shadow-card-active: none;
    --elevation-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.12);
    --elevation-shadow-flyout: 0 4px 16px rgba(0, 0, 0, 0.12);
    --elevation-shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.16);
    /* ========================================
     DISABLED STATE
     ======================================== */
    --disabled-opacity: 0.4;
    /* ========================================
     ERROR / DANGER COLORS
     React의 --destructive: oklch(0.577 0.245 27.325)
     ======================================== */
    --error-fill-rest: #dc2626;
    --error-fill-hover: #b91c1c;
    --error-fill-active: #991b1b;
    /* ========================================
     SUCCESS COLORS
     ======================================== */
    --success-fill-rest: #16a34a;
    --success-fill-hover: #15803d;
    --success-fill-active: #166534;
    /* ========================================
     WARNING COLORS
     ======================================== */
    --warning-fill-rest: #f59e0b;
    --warning-fill-hover: #d97706;
    --warning-fill-active: #b45309;
    /* ========================================
     INFO COLORS
     ======================================== */
    --info-fill-rest: #0284c7;
    --info-fill-hover: #0369a1;
    --info-fill-active: #075985;
    /* ========================================
     BASE LAYER LUMINANCE (라이트 테마)
     ======================================== */
    --base-layer-luminance: 1;
    /* ========================================
     FILL COLOR DELTAS
     ======================================== */
    --accent-fill-rest-delta: 0;
    --accent-fill-hover-delta: -6;
    --accent-fill-active-delta: 1;
    --accent-fill-focus-delta: 0;
    --accent-foreground-rest-delta: 0;
    --accent-foreground-hover-delta: -6;
    --accent-foreground-active-delta: 6;
    --accent-foreground-focus-delta: 0;
    --neutral-fill-rest-delta: -1;
    --neutral-fill-hover-delta: 1;
    --neutral-fill-active-delta: 0;
    --neutral-fill-focus-delta: 0;
}

/* ========================================
   FluentUI 컴포넌트 스타일 오버라이드
   ======================================== */
/* FluentSelect/FluentCombobox 스타일 - 직각, 얇은 보더 */
/*fluent-select,
fluent-combobox {
    border-radius: 0 !important;
    border: 0px solid var(--neutral-stroke-input-rest) !important;
    background: var(--neutral-fill-input-rest) !important;
}*/

fluent-select::part(control),
fluent-combobox::part(control) {
    border-radius: 0 !important;
    border: 1px solid var(--neutral-stroke-input-rest) !important;
    background: var(--neutral-fill-input-rest) !important;
}

/**/
fluent-select::part(listbox),
fluent-combobox::part(listbox) {
    border-radius: 0 !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
}

/*fluent-button::part(control) {
border-radius: 0 !important;*/
/*}*/
/* FluentCard 스타일 */
fluent-card {
    box-shadow: none;
}

/* FluentTextField 스타일 */
/*fluent-text-field {
    --control-corner-radius: 0px;
}

fluent-text-field::part(root) {
    border-radius: 0 !important;
}

fluent-text-field::part(control) {
    border-radius: 0 !important;
}*/
/* FluentSearch 스타일 */
/*fluent-search {
    --control-corner-radius: 0px;
}*/
/*fluent-search::part(root) {
    border-radius: 0 !important;
}*/
/* FluentLabel */
.fluent-typography.label-caption {
    /*font-size: var(--type-ramp-minus-1-font-size) !important;*/
    line-height: var(--type-ramp-minus-1-line-height) !important;
    color: var(--neutral-foreground-hint) !important;
}

.fluent-typography.lb-xs {
    font-size: var(--type-ramp-minus-2-font-size) !important;
    line-height: var(--type-ramp-minus-2-line-height) !important;
}

.fluent-typography.lb-sm {
    font-size: var(--type-ramp-minus-1-font-size) !important;
    line-height: var(--type-ramp-minus-1-line-height) !important;
}

.fluent-typography.lb-base {
    font-size: var(--type-ramp-base-font-size) !important;
    line-height: var(--type-ramp-base-line-height) !important;
}

.fluent-typography.lb-lg {
    font-size: var(--type-ramp-plus-1-font-size) !important;
    line-height: var(--type-ramp-plus-1-line-height) !important;
}

.fluent-typography.lb-xl {
    font-size: var(--type-ramp-plus-2-font-size) !important;
    line-height: var(--type-ramp-plus-2-line-height) !important;
}

.fluent-typography.lb-2xl {
    font-size: var(--type-ramp-plus-3-font-size) !important;
    line-height: var(--type-ramp-plus-3-line-height) !important;
}

.fluent-typography.lb-3xl {
    font-size: var(--type-ramp-plus-4-font-size) !important;
    line-height: var(--type-ramp-plus-4-line-height) !important;
}

.fluent-typography.lb-4xl {
    font-size: var(--type-ramp-plus-5-font-size) !important;
    line-height: var(--type-ramp-plus-5-line-height) !important;
}

.fluent-typography.lb-muted {
    color: var(--neutral-foreground-hint) !important;
}

.fluent-typography.lb-dark {
    color: var(--foreground-on-accent-rest) !important;
    background-color: var(--neutral-base-color) !important;
}

.fluent-typography.lb-upper {
    text-transform: uppercase !important;
}

.fluent-typography.lb-spacing {
    letter-spacing:0.05em;
}

.fluent-card.bd-dashed {
    border: 1px dashed var(--neutral-stroke-rest);
}

/*FluentBadge 스타일*/
fluent-badge::part(control) {
    border-radius: 0px;
    padding: 3px 8px;
    background-color: var(--neutral-fill-secondary-rest);
    color: var(--accent-base-color);
}

/*FluentBadge (Lightweight)*/
fluent-badge[appearance="lightweight"]::part(control) {
    border-width: 1px;
    border-color: var(--neutral-stroke-rest);
    background-color: transparent;
}

/*.badge-xs::part(control),
.badge-xs::part(root) {
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 4px 8px;
}*/
/* FluentTooltip 스타일 */
fluent-tooltip {
    --layer-corner-radius: 0px;
    border-radius: 0 !important;
}

/* FluentDialog 스타일 */
fluent-dialog {
    --layer-corner-radius: 0px;
}

fluent-dialog::part(control) {
    border-radius: 0 !important;
}

/* FluentMenu 스타일 */
/*fluent-menu {
--layer-corner-radius: 0px;
border-radius: 0 !important;

/* ========================================
TYPOGRAPHY UTILITIES
======================================== */

.text-xs {
    font-size: var(--type-ramp-minus-2-font-size);
    line-height: var(--type-ramp-minus-2-line-height);
}

.text-sm {
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

.text-base {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

.text-lg {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
}

.text-xl {
    font-size: var(--type-ramp-plus-2-font-size);
    line-height: var(--type-ramp-plus-2-line-height);
}

.text-2xl {
    font-size: var(--type-ramp-plus-3-font-size);
    line-height: var(--type-ramp-plus-3-line-height);
}

.text-3xl {
    font-size: var(--type-ramp-plus-4-font-size);
    line-height: var(--type-ramp-plus-4-line-height);
}

.text-4xl {
    font-size: var(--type-ramp-plus-5-font-size);
    line-height: var(--type-ramp-plus-5-line-height);
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.text-muted {
    color: var(--neutral-foreground-hint);
}

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

/* bb4의 muted-foreground 톤에 맞춘 더 연한 텍스트 */
.text-muted-foreground {
    color: var(--neutral-foreground-hint);
}

.text-foreground {
    color: var(--neutral-foreground-rest);
}

/* ========================================
LAYOUT UTILITIES
======================================== */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.center-h {
    align-self: center
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.gap-6 {
    gap: 24px;
}

.gap-8 {
    gap: 32px;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ========================================
SPACING UTILITIES
======================================== */

.p-4 {
    padding: 16px;
}

.p-5 {
    padding: 20px;
}

.p-6 {
    padding: 24px;
}

.px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.px-6 {
    padding-left: 24px;
    padding-right: 24px;
}

.py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.py-12 {
    padding-top: 48px;
    padding-bottom: 48px;
}

.py-16 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.py-20 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pt-20 {
    padding-top: 80px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-8 {
    margin-bottom: 32px;
}

.mb-10 {
    margin-bottom: 40px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-6 {
    margin-top: 24px;
}

/* ========================================
BORDER UTILITIES
======================================== */

.border {
    border: 1px solid var(--neutral-stroke-rest);
}

.border-b {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.border-t {
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* ========================================
COLOR UTILITIES
======================================== */
/* Gear icon colors - 오렌지, 블루, 퍼플, 에메랄드 */
.bg-orange {
    background-color: #f97316;
}

.bg-blue {
    background-color: #3b82f6;
}

.bg-purple {
    background-color: #a855f7;
}

.bg-emerald {
    background-color: #10b981;
}

.bg-muted {
    background-color: var(--neutral-fill-secondary-rest);
}

.bg-card {
    background-color: var(--neutral-layer-card-container);
}

.bg-background {
    background-color: var(--neutral-layer-1);
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.boder {
    border: 1px solid var(--neutral-stroke-input-rest) !important;
}

/***/
.circle {
    border-radius: 999px;
}

.stack-scroll {
    height: 100%;
    overflow-x: auto;
    min-height: 0; /* 이게 핵심 */
}

@media (min-width: 768px) {}

@media (max-width: 768px) {}