/**
 * =========================================================
 * 파일명 : variables.css
 * 위치 : /www/assets/css/base
 * ---------------------------------------------------------
 * 목적
 * - JP Engine 공통 CSS 변수 정의
 *
 * 담당 기능
 * - Color
 * - Font
 * - Radius
 * - Shadow
 * - Spacing
 * =========================================================
 */

:root{

    /* =========================
       Color
    ========================= */

    --color-brand:#2563eb;
    --color-brand-hover:#1d4ed8;

    --color-text-primary:#222;
    --color-text-secondary:#666;

    --color-border:#e5e7eb;

    --color-background:#ffffff;

    --color-danger:#ef4444;
    --color-success:#16a34a;
    --color-warning:#f59e0b;

    /* =========================
       Font
    ========================= */

    --font-family:
        "Pretendard",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        sans-serif;

    /* =========================
       Layout
    ========================= */

    --container-width:1200px;
	--z-header:1000;
    --z-navigation:900;
    --z-drawer:2000;
    --z-modal:3000;

    /* =========================
       Radius
    ========================= */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;

    /* =========================
       Shadow
    ========================= */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.08);

    /* =========================
       Spacing
    ========================= */

    --space-xs:4px;
    --space-sm:8px;
    --space-md:16px;
    --space-lg:24px;
    --space-xl:32px;
    
	/* =========================
	   Header
	========================= */

	--header-height:72px;
	--header-z-index:1000;
	--building-nav-z-index:990;

	/* =========================
	   Building Navigation
	========================= */

	--building-nav-height:64px;
	--building-nav-z-index:990;

	/* Header + Navigation */
	--sticky-offset:
		calc(
			var(--header-height)
			+ var(--building-nav-height)
		);
		
    /* =========================
       Drawer
    ========================= */
    
    --drawer-width:320px;
    --drawer-z-index:1100;
    
    /* =========================
       Icon
    ========================= */
    
    --icon-size-sm:18px;
    --icon-size-md:22px;
    --icon-size-lg:28px;
    
    /* =========================
       Touch
    ========================= */
    
    --touch-size:44px;
    
    /* =========================
       Container
    ========================= */
    
    --container-padding:16px;
    
    /* =========================
       Transition
    ========================= */
    
    --transition-fast:.15s ease;
    --transition:.25s ease;
    --transition-slow:.35s ease;
    
    /* =========================
       Breakpoint
    ========================= */
    
    --breakpoint-mobile:768px;
    --breakpoint-tablet:992px;
    --breakpoint-desktop:1200px;

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

    :root{

        --header-height:60px;
        --building-nav-height:60px;

    }

}