@charset "UTF-8";
/* ============================================================
   KAILAB DESIGN SYSTEM — Tokens only (colors / type / spacing)
   원본 : 카이랩 디자인 시스템 적용2/_ds/.../colors_and_type.css
   변경 : 1) Google Fonts @import 제거 → 아래 로컬 @font-face 사용
          2) 원본의 SEMANTIC ELEMENT DEFAULTS(body/h1~h6/p/a 전역 규칙) 제외
             → 기존 헤더/푸터/팝업 스타일 충돌 방지. :root 토큰만 반입.
   ============================================================ */

/* ----------------------------------------------------------
   LOCAL WEBFONTS
   Nunito / JetBrains Mono 는 가변 폰트(variable font)라 패밀리당 파일 1개로
   400~800 전 굵기를 커버한다. font-weight 에 범위를 적어야 중간 굵기가 나온다.
   두 폰트 모두 라틴 서브셋이라 한글은 Noto Sans KR 로 넘어간다.
   출처 : Google Fonts (fonts.gstatic.com), 2026-08-18 내려받음
   ---------------------------------------------------------- */
@font-face { font-family:'Nunito'; font-style:normal; font-weight:400 800; font-display:swap;
             src:url('../font/Nunito/Nunito-Variable.woff2') format('woff2-variations'),
                 url('../font/Nunito/Nunito-Variable.woff2') format('woff2'); }

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
             src:url('../font/JetBrainsMono/JetBrainsMono-Variable.woff2') format('woff2-variations'),
                 url('../font/JetBrainsMono/JetBrainsMono-Variable.woff2') format('woff2'); }

@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:400; font-display:swap;
             src:url('../font/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:500; font-display:swap;
             src:url('../font/NotoSansKR/NotoSansKR-Medium.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:700; font-display:swap;
             src:url('../font/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:900; font-display:swap;
             src:url('../font/NotoSansKR/NotoSansKR-Black.woff2') format('woff2'); }

:root {
  /* === Core Brand === */
  --kailab-navy:        #002FA3;   /* Primary — Ka letters */
  --kailab-cyan:        #009DF4;   /* Secondary — ilab letters */

  /* === Navy Scale === */
  --navy-950:           #001266;
  --navy-900:           #002080;
  --navy-800:           #002FA3;   /* Brand navy */
  --navy-700:           #1040B8;
  --navy-600:           #2255CC;
  --navy-500:           #3366DD;
  --navy-400:           #5580E8;
  --navy-300:           #7FA0F0;
  --navy-200:           #AABFF7;
  --navy-100:           #D5DFFB;
  --navy-50:            #EBF0FD;

  /* === Cyan Scale === */
  --cyan-900:           #004A7A;
  --cyan-800:           #006AAD;
  --cyan-700:           #0082D4;
  --cyan-600:           #009DF4;   /* Brand cyan */
  --cyan-500:           #1AABF5;
  --cyan-400:           #40BBF7;
  --cyan-300:           #70CCFA;
  --cyan-200:           #A5DFFB;
  --cyan-100:           #D1EFFD;
  --cyan-50:            #E8F7FE;

  /* === Neutrals (cool-tinted) === */
  --neutral-950:        #0A0E1A;
  --neutral-900:        #111827;
  --neutral-800:        #1F2937;
  --neutral-700:        #374151;
  --neutral-600:        #4B5563;
  --neutral-500:        #6B7280;
  --neutral-400:        #9CA3AF;
  --neutral-300:        #D1D5DB;
  --neutral-200:        #E5E7EB;
  --neutral-100:        #F3F4F6;
  --neutral-50:         #F9FAFB;
  --neutral-0:          #FFFFFF;

  /* === Semantic UI Colors === */
  --color-success:      #10B981;
  --color-success-bg:   #D1FAE5;
  --color-warning:      #F59E0B;
  --color-warning-bg:   #FEF3C7;
  --color-error:        #EF4444;
  --color-error-bg:     #FEE2E2;
  --color-info:         #009DF4;
  --color-info-bg:      #D1EFFD;

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ---------------------------------------------------------- */

  /* Backgrounds */
  --bg-base:            #FFFFFF;
  --bg-subtle:          var(--neutral-50);
  --bg-muted:           var(--neutral-100);
  --bg-brand-subtle:    var(--navy-50);
  --bg-brand-accent:    var(--cyan-50);

  /* Foregrounds / Text */
  --fg-primary:         var(--neutral-900);
  --fg-secondary:       var(--neutral-600);
  --fg-tertiary:        var(--neutral-400);
  --fg-inverse:         #FFFFFF;
  --fg-brand:           var(--navy-800);
  --fg-accent:          var(--cyan-600);
  --fg-link:            var(--navy-700);
  --fg-link-hover:      var(--cyan-600);

  /* Borders */
  --border-subtle:      var(--neutral-200);
  --border-default:     var(--neutral-300);
  --border-strong:      var(--neutral-400);
  --border-brand:       var(--navy-800);
  --border-accent:      var(--cyan-600);

  /* Interactive */
  --btn-primary-bg:     var(--navy-800);
  --btn-primary-hover:  var(--navy-700);
  --btn-primary-fg:     #FFFFFF;
  --btn-accent-bg:      var(--cyan-600);
  --btn-accent-hover:   var(--cyan-700);
  --btn-accent-fg:      #FFFFFF;

  /* Shadows */
  --shadow-sm:          0 1px 3px rgba(0,47,163,0.08), 0 1px 2px rgba(0,47,163,0.04);
  --shadow-md:          0 4px 12px rgba(0,47,163,0.10), 0 2px 6px rgba(0,47,163,0.06);
  --shadow-lg:          0 8px 24px rgba(0,47,163,0.12), 0 4px 12px rgba(0,47,163,0.08);
  --shadow-xl:          0 16px 40px rgba(0,47,163,0.14), 0 8px 20px rgba(0,47,163,0.08);

  /* Border radius */
  --radius-xs:          4px;
  --radius-sm:          6px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-2xl:         24px;
  --radius-full:        9999px;

  /* Spacing scale */
  --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;
  --space-20:           80px;
  --space-24:           96px;

  /* ----------------------------------------------------------
     TYPOGRAPHY TOKENS
     NOTE: Nunito used as brand font substitute (rounded geo).
     Noto Sans KR used for Korean text.
     Original Kailab brand font not identified — please supply.
     ---------------------------------------------------------- */

  /* 프로젝트 공통 폰트 스택으로 통일 (base_doctorpencil.css 의 body 와 동일).
     디자인 원본은 Nunito / JetBrains Mono 였으나 사이트 전체 일관성을 위해 교체. */
  --font-brand:         'Pretendard', '프리텐다드', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;
  --font-body:          'Pretendard', '프리텐다드', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;
  --font-mono:          'Pretendard', '프리텐다드', "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold: 800;
  --font-weight-black:   900;

  --text-xs:            13px;
  --text-sm:            15px;
  --text-base:          18px;
  --text-md:            20px;
  --text-lg:            22px;
  --text-xl:            26px;
  --text-2xl:           30px;
  --text-3xl:           36px;
  --text-4xl:           44px;
  --text-5xl:           56px;
  --text-6xl:           72px;
  --text-7xl:           88px;

  --leading-tight:      1.2;
  --leading-snug:       1.35;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;
  --leading-loose:      1.8;

  --tracking-tight:     -0.02em;
  --tracking-snug:      -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.02em;
  --tracking-wider:     0.05em;
  --tracking-widest:    0.1em;
}