/* ============================================================
   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('../fonts/pretendard/pretendard.min.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: var(--lh-short); /* KT 단문 148% */
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: var(--bg-body);
}

/* 인라인 Lucide 아이콘 — 텍스트 베이스라인 정렬 (icons.js) */
.iac-icon {
    display: inline-block;
    vertical-align: -0.14em;
    flex-shrink: 0;
}

/* ── Typography Scale (KT — Heading 단문 148% / 본문 장문 170%) ── */
/* 헤딩은 KT Flow 브랜드 폰트(--font-heading, 폰트 없으면 Pretendard 폴백) */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
}

h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: var(--lh-short);
}

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

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

h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--lh-short);
}

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

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

/* ── 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;
}