/* 디자인 값 출처
 * - 덱 틀(머리줄 64 · 아래 막대 68 · 글자 크기 단계 · 전환 시간): granter.biz/service/overview 실측(2026-10-27)
 * - 색 · 재질 · 창 모서리 · 신호등 버튼: Apple macOS 26 UI Kit(Figma, Appearance/Sizes 변수, Windows 페이지)
 * - 폰 화면 · 목록 · 알림 · 글자 스타일: iOS 16 UI Kit(Itty Bitty Apps, Figma 텍스트/색/효과 스타일)
 * 애플 SF Pro는 라이선스상 웹 폰트로 올리지 않는다. 목업 안은 기기 시스템 폰트, 본문은 Pretendard.
 */

@font-face {
  font-family: "Pretendard Variable";
  src: url("../vendor/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  /* 글꼴 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;

  /* macOS 26 색 */
  --accent: #0088ff;
  --accent-dark: #0091ff;
  --tint: #0d6fff;
  --accent-text: #0066cc;       /* 글자용 파랑: 흰 바탕 대비 5.6:1 (#0088ff는 3.5:1) */
  --accent-text-d: #4db1ff;
  --green: #34c759;
  --orange: #ff8d28;
  --red: #ff383c;
  --indigo: #6155f5;

  /* 글자 색(macOS 26 Label) */
  --label-1: rgba(0, 0, 0, 0.85);
  --label-2: #6e6e73;            /* 흰 바탕 대비 5.1:1 (macOS 값 rgba(0,0,0,.5)는 3.9:1이라 본문에 부족) */
  --label-3: rgba(0, 0, 0, 0.25);
  --label-1-d: rgba(255, 255, 255, 0.88);
  --label-2-d: rgba(255, 255, 255, 0.64);
  --label-3-d: rgba(255, 255, 255, 0.3);

  /* 채우기 · 구분선 */
  --fill-1: rgba(0, 0, 0, 0.1);
  --fill-2: rgba(0, 0, 0, 0.08);
  --fill-3: rgba(0, 0, 0, 0.05);
  --fill-4: rgba(0, 0, 0, 0.03);
  --fill-1-d: rgba(255, 255, 255, 0.1);
  --fill-2-d: rgba(255, 255, 255, 0.08);
  --fill-3-d: rgba(255, 255, 255, 0.05);
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-d: rgba(255, 255, 255, 0.1);
  --sep-ios: #c6c6c8;

  /* 바탕 */
  --bg: #ffffff;
  --bg-subtle: #f5f5f7;
  --bg-grouped: #f2f2f7;
  --bg-dark: #0a0a0a;
  --bg-dark-2: #141416;
  --window-dark: #1e1e1e;

  /* 재질(macOS 26 Materials · iOS 16 System Materials) */
  --mat-light: rgba(246, 246, 246, 0.72);
  --mat-dark: rgba(40, 40, 40, 0.7);
  --mat-ios-regular: rgba(249, 249, 249, 0.78);
  --blur: blur(24px) saturate(180%);

  /* 그림자 */
  --shadow-window: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.23);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

  /* 모서리 */
  --r-window: 26px;
  --r-window-sm: 16px;
  --r-card: 18px;
  --r-list: 12px;
  --r-capsule: 1000px;

  /* 덱 틀 */
  --top: 64px;
  --bar: 68px;
  --hpad: clamp(20px, 6.9vw, 100px);
  --vpad: clamp(20px, 4.4vh, 44px);
  --maxw: clamp(1240px, 75vw - 60px, 1480px); /* 1440 화면은 그랜터와 같은 1240, 교육장 1920 화면에서는 넓게 */
  --gut: 16px; /* 격자 간격: 카드 · 목록 · 단계 탭 · 머리 부제가 모두 같은 선을 써요 */

  /* 움직임(에밀 코월스키 기준 곡선 · 그랜터 실측 시간) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 160ms;
  --t-base: 250ms;
  --t-slow: 420ms;
}