@charset "utf-8";

/* ==========================================================================
   SPIDO 디자인 토큰
   색상, 여백, 타이포, 모션 값의 단일 기준
   ========================================================================== */

/* Paperlogy - 눈누 웹폰트 (운영 전환 시 자체 호스팅으로 교체) */
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
    /* 색상 */
    --spido-bg: #080808;
    --spido-bg-alt: #0d0d0d;
    --spido-surface: #131313;
    --spido-surface-2: #1c1c1c;
    --spido-surface-3: #262626;
    --spido-text: #ffffff;
    --spido-text-sub: #b4b4b4;
    --spido-text-dim: #7c7c7c;
    --spido-line: rgba(255, 255, 255, 0.14);
    --spido-line-soft: rgba(255, 255, 255, 0.08);
    --spido-accent: #2f6bff;
    --spido-accent-hover: #1a56f0;
    --spido-accent-soft: rgba(47, 107, 255, 0.16);

    /* 레이아웃 */
    --spido-gutter: clamp(20px, 4.1667vw, 60px);
    --spido-header-h: 84px;
    --spido-section-y: clamp(72px, 9vw, 150px);
    --spido-maxw: 1720px;
    --spido-text-maxw: 62ch;

    /* 폰트 */
    --spido-font: 'Paperlogy', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

    /* 타이포 스케일 - 큼직한 시네마틱 위계 */
    --spido-fs-display: clamp(2.75rem, 7vw, 6.5rem);
    --spido-fs-h1: clamp(2.25rem, 5vw, 4.25rem);
    --spido-fs-h2: clamp(1.75rem, 3.4vw, 3rem);
    --spido-fs-h3: clamp(1.25rem, 1.9vw, 1.75rem);
    --spido-fs-lead: clamp(1.0625rem, 1.35vw, 1.375rem);
    --spido-fs-body: 1rem;
    --spido-fs-small: 0.875rem;
    --spido-fs-eyebrow: 0.8125rem;

    /* 형태 */
    --spido-radius-sm: 6px;
    --spido-radius: 14px;
    --spido-radius-lg: 22px;

    /* 모션 */
    --spido-t-fast: 180ms ease;
    --spido-t-base: 280ms ease;
    --spido-t-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);

    /* 레이어 */
    --spido-z-header: 900;
    --spido-z-drawer: 1000;
    --spido-z-top: 1100;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --spido-t-fast: 1ms;
        --spido-t-base: 1ms;
        --spido-t-slow: 1ms;
    }
}