/* =============================================================
   variables.css — KPLUS DB 홈페이지 디자인 토큰
   Figma "db 홈페이지" (file hIJDNfXqLsMnSXdlkrZF6R) 에서 추출.
   모든 커스텀 프로퍼티는 --nk-* 접두어를 사용한다.
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     색상 (Color)
     --------------------------------------------------------- */
  --nk-color-black: #111111;        /* 본문 기본 텍스트 (Figma: black) */
  --nk-color-white: #ffffff;        /* Figma: white */

  --nk-color-gray-1: #8f8f8f;       /* placeholder, 보조 텍스트 (Figma: gray-1) */
  --nk-color-gray-2: #737373;       /* 캡션, 비활성 텍스트 (Figma: gray-2) */
  /* 연한 배경(blue-bg-2 #e6f0ff 등) 위 보조 텍스트. gray-2 는 그 위에서
     4.13:1 이라 WCAG AA(4.5:1)에 못 미쳐서 한 단계 어둡게 둔다(5.56:1). */
  --nk-color-gray-2-strong: #5f5f5f;
  /* 어두운 사진 위에 얹는 포인트 블루. primary(#225be1)는 그 위에서 2~3:1
     밖에 안 나와 쓸 수 없다. 실제 글자 뒤 배경(스크림 적용 후 rgb(100,107,127))
     기준 3.65:1 — 32/24px 굵은 글씨라 AA 큰 글씨 기준(3:1)을 넘긴다. */
  --nk-color-blue-on-dark: #b9d9ff;
  --nk-color-gray-line: #e5e5e5;    /* 구분선, input 테두리 (Figma: gray-line / gray-input) */
  --nk-color-gray-input-bg: #f3f3f3;/* 비활성 input 배경 (Figma: gray-input-bg) */

  --nk-color-blue-1: #225be1;       /* 브랜드 메인 / primary 버튼 (Figma: blue-1) */
  --nk-color-blue-line: #dde7fa;    /* 선택 안 된 pill, 연한 테두리 (Figma: blue-line) */
  --nk-color-blue-bg: #f9fbff;      /* 파란 강조 영역 배경 (Figma: blue-bg) */
  /* 프로그램 실제 화면 톤(메인 "왜 우리 프로그램인가" 다크 카드). 화면 배경
     네이비 두 단계와 UI 포인트 보라. */
  --nk-color-navy-1: #12162b;
  --nk-color-navy-2: #1b2140;
  --nk-color-violet: #7b6cf6;
  --nk-color-blue-bg-2: #e6f0ff;    /* 선택된 pill/배지 배경 (프로그램 상세 "지도 검색" 배지 등) */

  --nk-color-bg: #f5f7f9;           /* 페이지 기본 배경 (Figma: bg) */
  --nk-color-cyan-bg: #c4edf9;      /* 로그인 아바타 배경 (마이페이지 헤더) */
  --nk-color-icon-bg: #eaf1ff;      /* 마이페이지 카드 아이콘 배경 */
  --nk-color-dark: #06041b;         /* 다크 섹션 배경 (Figma: 히어로 / 우리의 목표) */
  --nk-color-image-placeholder: #d9d9d9; /* 이미지 미배치 자리 (Figma 기본 채움) */

  /* 푸터 다크 영역 (Figma: Footer 컴포넌트) */
  --nk-color-footer-bg: #1a1a1a;          /* 푸터 배경 */
  --nk-color-footer-divider: #374151;     /* 푸터 구분선 */
  --nk-color-footer-heading: #ffffff;     /* 컬럼 제목 */
  --nk-color-footer-link: #d1d5db;        /* 링크 텍스트 */
  --nk-color-footer-muted: #9ca3af;       /* 설명 / 회사 정보 */

  /* 어드민 danger/error 상태용 (Figma 원본엔 없음 — 리드·사업자 DB 원본 수집
     현황처럼 실패/호출불가를 정상과 구분해야 하는 어드민 화면 전용으로 추가) */
  --nk-color-red-1: #d64545;        /* 실패·에러 텍스트/아이콘 */
  --nk-color-red-line: #f3cbc9;     /* 연한 테두리 */
  --nk-color-red-bg: #fdf1f0;       /* 연한 강조 배경 */

  /* 성공 상태용 (Figma 원본엔 없음 — 아이디/이메일 중복확인 통과처럼 성공을
     정상 텍스트와 구분해야 하는 화면 전용으로 추가) */
  --nk-color-green-1: #1a9e5c;      /* 성공 텍스트/아이콘 */
  --nk-color-green-line: #c6e9d7;   /* 연한 테두리 (red-line 과 같은 역할) */
  --nk-color-green-bg: #f1faf5;     /* 연한 강조 배경 (red-bg 와 같은 역할) */

  /* 오렌지 강조 (Figma 원본엔 없음 — "내편비즈 뉴" 상세 페이지의 특징 카드/
     pill 배지 전용으로 추가. 상품에 종속되지 않는 범용 토큰이라 이후 다른
     상품 상세 페이지에서도 재사용) */
  --nk-orange: #f87400;
  --nk-orange-bg: #faf4ea;

  /* 의미 기반 별칭 */
  --nk-color-text: var(--nk-color-black);
  --nk-color-text-sub: var(--nk-color-gray-2);
  --nk-color-text-placeholder: var(--nk-color-gray-1);
  --nk-color-primary: var(--nk-color-blue-1);
  --nk-color-primary-hover: #1b4ec4;       /* primary 버튼 hover (blue-1 어둡게) */
  --nk-color-border: var(--nk-color-gray-line);
  --nk-color-surface: var(--nk-color-white);
  --nk-color-page-bg: var(--nk-color-bg);

  /* ---------------------------------------------------------
     폰트 (Typography) — 전부 Pretendard
     --------------------------------------------------------- */
  --nk-font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --nk-font-weight-regular: 400;
  --nk-font-weight-medium: 500;
  --nk-font-weight-bold: 700;

  /* 폰트 크기 스케일 (Figma 스타일명 기준: p<size>-<weight>) */
  --nk-font-size-12: 12px;
  --nk-font-size-13: 13px;
  --nk-font-size-14: 14px;
  --nk-font-size-15: 15px;
  --nk-font-size-16: 16px;
  --nk-font-size-18: 18px;
  --nk-font-size-24: 24px;
  --nk-font-size-32: 32px;
  --nk-font-size-20: 20px;
  --nk-font-size-28: 28px;
  --nk-font-size-36: 36px;

  /* 라인 높이 (해당 폰트 크기와 짝) */
  --nk-line-height-12: 1.5;   /* p12-r (Figma: normal) */
  --nk-line-height-13: 20px;
  --nk-line-height-14: 22px;
  --nk-line-height-15: 24px;   /* p15-r / p15-m */
  --nk-line-height-15-bold: 22px; /* p15-b */
  --nk-line-height-16: 1;      /* p16-b (Figma lineHeight 100%) */
  --nk-line-height-16-medium: 24px; /* p16-m */
  --nk-line-height-18: 26px;
  --nk-line-height-24: 32px;
  --nk-line-height-32: 42px;
  --nk-line-height-20: 28px;
  --nk-line-height-28: 38px;
  --nk-line-height-36: 46px;

  /* 타이포 프리셋 (Figma 텍스트 스타일 1:1 대응) */
  --nk-text-p12-r: var(--nk-font-weight-regular) var(--nk-font-size-12) / var(--nk-line-height-12) var(--nk-font-family);
  --nk-text-p13-r: var(--nk-font-weight-regular) var(--nk-font-size-13) / var(--nk-line-height-13) var(--nk-font-family);
  --nk-text-p14-r: var(--nk-font-weight-regular) var(--nk-font-size-14) / var(--nk-line-height-14) var(--nk-font-family);
  --nk-text-p14-m: var(--nk-font-weight-medium) var(--nk-font-size-14) / var(--nk-line-height-14) var(--nk-font-family);
  --nk-text-p15-r: var(--nk-font-weight-regular) var(--nk-font-size-15) / var(--nk-line-height-15) var(--nk-font-family);
  --nk-text-p15-m: var(--nk-font-weight-medium) var(--nk-font-size-15) / var(--nk-line-height-15) var(--nk-font-family);
  --nk-text-p15-b: var(--nk-font-weight-bold) var(--nk-font-size-15) / var(--nk-line-height-15-bold) var(--nk-font-family);
  --nk-text-p16-b: var(--nk-font-weight-bold) var(--nk-font-size-16) / var(--nk-line-height-16) var(--nk-font-family);
  --nk-text-p16-m: var(--nk-font-weight-medium) var(--nk-font-size-16) / var(--nk-line-height-16-medium) var(--nk-font-family);
  --nk-text-p18-m: var(--nk-font-weight-medium) var(--nk-font-size-18) / var(--nk-line-height-18) var(--nk-font-family);
  --nk-text-p18-b: var(--nk-font-weight-bold) var(--nk-font-size-18) / var(--nk-line-height-18) var(--nk-font-family);
  --nk-text-p24-b: var(--nk-font-weight-bold) var(--nk-font-size-24) / var(--nk-line-height-24) var(--nk-font-family);
  --nk-text-p32-b: var(--nk-font-weight-bold) var(--nk-font-size-32) / var(--nk-line-height-32) var(--nk-font-family);
  --nk-text-p20-b: var(--nk-font-weight-bold) var(--nk-font-size-20) / var(--nk-line-height-20) var(--nk-font-family);
  --nk-text-p28-b: var(--nk-font-weight-bold) var(--nk-font-size-28) / var(--nk-line-height-28) var(--nk-font-family);
  --nk-text-p36-b: var(--nk-font-weight-bold) var(--nk-font-size-36) / var(--nk-line-height-36) var(--nk-font-family);

  /* ---------------------------------------------------------
     여백 / 간격 (Spacing)
     Figma 오토레이아웃 gap·padding 에서 관찰된 값.
     --------------------------------------------------------- */
  --nk-space-4: 4px;
  --nk-space-6: 6px;
  --nk-space-8: 8px;
  --nk-space-10: 10px;
  --nk-space-12: 12px;
  --nk-space-16: 16px;
  --nk-space-20: 20px;
  --nk-space-24: 24px;
  --nk-space-28: 28px;
  --nk-space-32: 32px;
  --nk-space-40: 40px;
  --nk-space-48: 48px;
  --nk-space-60: 60px;
  --nk-space-80: 80px;
  --nk-space-160: 160px;  /* 섹션 상단 여백 (hero pt) */

  /* 컴포넌트 내부 패딩 프리셋 */
  --nk-pad-input: 9px 16px;        /* input: py 9 / px 16 */
  --nk-pad-pill: 6px 16px;         /* navi pill: py 6 / px 16 */
  --nk-pad-card: 24px;             /* 카드 기본 패딩 */
  --nk-pad-section: 60px 40px;     /* 섹션 블록 패딩 (py 60 / px 40) */

  /* ---------------------------------------------------------
     테두리 반경 (Radius)
     --------------------------------------------------------- */
  --nk-radius-2: 2px;    /* 체크박스 */
  --nk-radius-4: 4px;    /* input, 보조 버튼 */
  --nk-radius-8: 8px;    /* 기본 버튼, 카드 */
  --nk-radius-12: 12px;  /* 카드 안 화면(스크린샷) */
  --nk-radius-16: 16px;  /* 큰 카드, 강조 블록 */
  --nk-radius-32: 32px;  /* 사진 카드(메인 세이프존) */
  --nk-radius-pill: 40px;/* navi pill */

  /* ---------------------------------------------------------
     레이아웃 (Layout)
     브레이크포인트: 1440 / 768 / 375
     --------------------------------------------------------- */
  --nk-layout-max-width: 1440px;   /* 데스크톱 최대 레이아웃 폭 */
  --nk-content-max-width: 1280px;  /* 콘텐츠 영역 폭 */
  --nk-header-height: 60px;        /* 헤더 높이 */
  --nk-control-height: 44px;       /* 버튼·입력 컨트롤 높이 */
  --nk-form-width: 328px;          /* 로그인/회원가입 폼 카드 폭 */

  --nk-breakpoint-desktop: 1440px;
  --nk-breakpoint-tablet: 768px;
  --nk-breakpoint-mobile: 375px;
}

/* =============================================================
   타이포그래피 유틸 클래스
   Figma 텍스트 스타일(p13-r ~ p36-b)을 그대로 클래스로 노출.
   사용 예: <p class="nk-text nk-text--p15-r"> ... </p>
   ============================================================= */

.nk-text {
  font-family: var(--nk-font-family);
  color: var(--nk-color-text);
  margin: 0;
}

/* Regular 400 */
.nk-text--p12-r {
  font-weight: var(--nk-font-weight-regular);
  font-size: var(--nk-font-size-12);
  line-height: var(--nk-line-height-12);
}
.nk-text--p13-r {
  font-weight: var(--nk-font-weight-regular);
  font-size: var(--nk-font-size-13);
  line-height: var(--nk-line-height-13);
}
.nk-text--p14-r {
  font-weight: var(--nk-font-weight-regular);
  font-size: var(--nk-font-size-14);
  line-height: var(--nk-line-height-14);
}
.nk-text--p15-r {
  font-weight: var(--nk-font-weight-regular);
  font-size: var(--nk-font-size-15);
  line-height: var(--nk-line-height-15);
}

/* Medium 500 */
.nk-text--p14-m {
  font-weight: var(--nk-font-weight-medium);
  font-size: var(--nk-font-size-14);
  line-height: var(--nk-line-height-14);
}
.nk-text--p15-m {
  font-weight: var(--nk-font-weight-medium);
  font-size: var(--nk-font-size-15);
  line-height: var(--nk-line-height-15);
}
.nk-text--p18-m {
  font-weight: var(--nk-font-weight-medium);
  font-size: var(--nk-font-size-18);
  line-height: var(--nk-line-height-18);
}

/* Bold 700 */
.nk-text--p15-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-15);
  line-height: var(--nk-line-height-15-bold);
}
.nk-text--p16-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-16);
  line-height: var(--nk-line-height-16);
}
.nk-text--p16-m {
  font-weight: var(--nk-font-weight-medium);
  font-size: var(--nk-font-size-16);
  line-height: var(--nk-line-height-16-medium);
}
.nk-text--p18-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-18);
  line-height: var(--nk-line-height-18);
}
.nk-text--p24-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-24);
  line-height: var(--nk-line-height-24);
}
.nk-text--p32-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-32);
  line-height: var(--nk-line-height-32);
}
.nk-text--p36-b {
  font-weight: var(--nk-font-weight-bold);
  font-size: var(--nk-font-size-36);
  line-height: var(--nk-line-height-36);
}

/* 단일 축 유틸 (크기/굵기만 따로 조합할 때) */
.nk-fw--regular { font-weight: var(--nk-font-weight-regular); }
.nk-fw--medium  { font-weight: var(--nk-font-weight-medium); }
.nk-fw--bold    { font-weight: var(--nk-font-weight-bold); }

.nk-fs--12 { font-size: var(--nk-font-size-12); }
.nk-fs--13 { font-size: var(--nk-font-size-13); }
.nk-fs--14 { font-size: var(--nk-font-size-14); }
.nk-fs--15 { font-size: var(--nk-font-size-15); }
.nk-fs--16 { font-size: var(--nk-font-size-16); }
.nk-fs--18 { font-size: var(--nk-font-size-18); }
.nk-fs--24 { font-size: var(--nk-font-size-24); }
.nk-fs--32 { font-size: var(--nk-font-size-32); }
.nk-fs--36 { font-size: var(--nk-font-size-36); }