/*웹폰트 */
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
@import url("//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap");
@import url('//fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

/* tokens.css */
@layer reset, tokens, base, pages;

@layer tokens {
	:root {
		/* 타이포 */
		--font-sans: 'Noto Sans KR', 'Pretendard', Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--font-sans-eng: 'Montserrat';
		--font-weight:400;

		/* 헤더 */
        --header-h: 75px;
        --header-h-mobile: 54px;

		/* 아이콘 공통 토큰 */
		--icon-size: 20px;
		--icon-stroke: 2.5px;
        --icon-stroke-hover: 2.5px;
		--icon-color: #5355a0;
		--icon-hover: #04F7FF;

		/* 네비 치수 */
        --nav-w: 280px; 
		--nav-w-collapsed: 84px; 
		--header-h: 64px;

        /* 테마 */
        --bg:#F3F0FF; 
		--bg-2:#0f1628;
		--bg-3:#131417;
		--bg-4:#f5f5f5;
		--bg-5:#5324EB;
		--panel:#121a2f; 
		--panel-2:#192442; 
		--panel-3:#1A222F;
		--panel-4:#42FFC3;
		--panel-5:#F2FA18;
		--surface:#18181f;
		--border: rgba(93,123,132,.1);
        --border-1: #303441;
        --text:#1D1D1D; 
		--muted:#9eb6c6; 
		--brand:#16c2b7; 
		--focus:#7451FC; 
		--current_text:#1DD4C9; 
		--gold:#FFF81F;
        --radius:16px; 
		--radius-1:20px; 
		--border-1:#dcdcdc;
		--shadow:0 10px 30px rgba(0,0,0,.35);
        --gap: clamp(14px, 2vw, 22px);

		/* 타이포 & 리듬(유연한 클램프 스케일) */
		--fs-xs: clamp(12px, 0.72rem + 0.1vw, 13px);
		--fs-sm: clamp(13px, 0.78rem + 0.2vw, 14px);
		--fs-md: clamp(14px, 0.86rem + 0.35vw, 16px);
		--fs-lg: clamp(16px, 0.95rem + 0.5vw, 18px);
		--fs-xl: clamp(18px, 1.05rem + 0.7vw, 22px);
		--fs-2xl: clamp(22px, 1.2rem + 1.2vw, 28px);
		--fs-3xl: clamp(26px, 1.4rem + 1.8vw, 36px);

		--lh-tight: 1.25;
        --lh-normal: 1.5;
        --lh-loose: 1.7;

		/* 공간 스케일 */
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 20px;
		--space-6: 24px;
		--space-8: 32px;
		--space-10: 40px;
		--space-12: 48px;
		--space-16: 64px;

		/* 레이아웃 */
		--container-w: 768px;
		--gutter: 12px;
		--gutter-zero: 0px;
		--radius: 12px;
		--shadow-1: 0 8px 20px rgba(0,0,0,.2);

        /* 브레이크포인트 */
		--bp-xsm: 360px;
		--bp-sm: 480px;
		--bp-md: 768px;
		--bp-lg: 1024px;
		--bp-xl: 1440px;

		color-scheme: dark light; /* 시스템 테마와 폼 위젯 대비 개선 */
	}
    
	/*@media (max-width: 1440px){ :root { --container-w: 1200px; } }
	@media (max-width: 1024px){ :root { --container-w: 960px; } }
	@media (max-width: 768px) { :root { --container-w: 100%; --gutter: 10px; } }*/

	@media (prefers-color-scheme: dark) {
		:root {
		--bg: #0b0f19;
		--fg: #e5e7eb;
		--shadow-1: 0 1px 2px rgba(0,0,0,.4);
		--shadow-2: 0 8px 24px rgba(0,0,0,.6);
		}
	}
}