/* ==========================================================================
   default.css — Nolege 홈페이지 전역 토큰 / 폰트 / 기본 리셋
   - 브랜드 컬러는 앱 아이콘(네이비 N + 크림 배경 + 파스텔 노트)에서 추출
   - 새 색이 필요하면 해당 분류의 다음 번호로 추가 (기존 변수 삭제·이름변경 금지)
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* 포인트 컬러 (사용 빈도 순) */
  --main-color: #1c1d22;   /* 잉크 (앱 스티커 디자인과 동일) */
  --secondary: #6b7280;    /* 보조 텍스트 그레이 */

  /* 배경 */
  --bg01: #ffffff;
  --bg02: #faf6ee;         /* 크림 (아이콘 배경 톤) */
  --bg03: #f3ecdd;         /* 크림 진한 단계 */

  /* 그레이 (어두운순) */
  --gray01: #000000;
  --gray02: #1c1c22;
  --gray03: #333740;
  --gray04: #4b505c;
  --gray05: #666d7e;
  --gray06: #8a8f9c;
  --gray07: #aab0bb;
  --gray08: #cdd1d8;
  --gray09: #e2e4e8;
  --gray10: #f0f1f3;

  /* 노트(스티키) 컬러 — 앱 메모지 팔레트와 동일 */
  --note-yellow: #f1e7a6;
  --note-orange: #f8c8a2;
  --note-coral: #f4b4b0;
  --note-blue: #aed3ef;
  --note-green: #b2e0ac;
  --note-purple: #d8bdee;

  /* rgba (투명도 필요한 색) */
  --rgba01: rgba(62, 68, 86, 0.12);
  --rgba02: rgba(0, 0, 0, 0.55);
  --rgba03: rgba(255, 255, 255, 0.16);
  --rgba04: rgba(0, 0, 0, 0.1);
  --rgba05: rgba(0, 0, 0, 0.28);
  --rgba06: rgba(255, 255, 255, 0.65);

  /* 그림자 — 스티커 스타일 오프셋 (앱 디자인과 동일 언어) */
  --shadow01: 2px 2px 0 rgba(28, 29, 34, 0.8);
  --shadow02: 4px 4px 0 rgba(28, 29, 34, 0.8);
  --shadow03: 7px 7px 0 rgba(28, 29, 34, 0.85);
}

/* 리셋 */
*, *::before, *::after {box-sizing:border-box;}
html, body {margin:0; padding:0;}
html {scroll-behavior:smooth;}

/* 기본 body: 폰트와 letter-spacing은 여기서 한 번만 */
body {font-family:'Pretendard Variable', 'Pretendard', sans-serif; color:var(--gray02); background:var(--bg01); letter-spacing:-0.3px;}

/* 폰트 클래스 — 수치·단축키용 모노스페이스 (시스템 폰트, 웹폰트 로드 없음) */
.ff-mono {font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;}

/* 이미지 기본 */
img {max-width:100%; vertical-align:top;}

/* 버튼·링크 기본 */
button {font-family:inherit; cursor:pointer;}
a {color:inherit; text-decoration:none;}