/* ============================================================
   Base — Global Reset & Typography (Fluent / Azure Portal)
   ============================================================ */

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

html,
body {
    height: 100%;
    background-color: var(--bg-body);
}

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css');

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-size: 15px; /* Body 2 standard */
    font-weight: 400;
    line-height: 1.48; /* Standard line-height */
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: var(--bg-body);
}

/* ── Typography Scale (Seamless Standard) ──────────────── */
h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.48;
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.48;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.48;
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

p {
    line-height: 1.6;
    font-size: var(--font-size-md);
}

/* ── Selection ─────────────────────────────────────────────── */
::selection {
    background: var(--brand-primary);
    color: #fff;
}

/* ── Scrollbar (Fluent thin style) ────────────────────────── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Focus Ring (Fluent style) ─────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Utility classes ───────────────────────────────────────── */
.hidden {
    display: none !important;
}

.step-content {
    animation: fadeIn 0.15s ease;
}

/* ── Spinner (Fluent ring style) ───────────────────────────── */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.75s linear infinite;
    vertical-align: middle;
}

/* ── Resource count badge ──────────────────────────────────── */
.resource-count {
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-left: auto;
}

/* ── Text gradient util ────────────────────────────────────── */
.text-primary-gradient {
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}