/* ============================================================
   교수 자기소개 인터랙티브 페이지 — 디자인 토큰 v1.0
   @designer 산출물. 기존 인포그래픽 플랫폼 토큰과 무관한 독립 체계.
   컨셉: "예능 자막이 붙은 스케치북 로드무비"
   (스티커 캐리커처의 손그림 잉크 스케치 그림체가 기준)
   ============================================================ */

:root {
  /* ---------- 컬러 ---------- */
  --paper:      #FFF9F0;  /* 무대 배경 — 따뜻한 크림 종이 (스티커 피부톤과 조화) */
  --ink:        #23272F;  /* 기본 텍스트·스케치 라인 (순흑 금지 — 스티커 잉크색과 동일 계열) */
  --ink-soft:   #5B616C;  /* 보조 텍스트 (기간·캡션) */
  --coral:      #FF6B4A;  /* 주 포인트 — 예능 자막 강조·스탬프·현재 정거장 */
  --coral-dim:  rgba(255, 107, 74, 0.14);
  --sky:        #3E97E8;  /* 보조 포인트 — 기술 배지 카테고리·링크성 요소 */
  --sunny:      #FFD84A;  /* 형광펜 하이라이트 (텍스트 밑줄 언더레이 전용) */
  --sunny-marker: linear-gradient(transparent 55%, rgba(255, 216, 74, 0.65) 55%, rgba(255, 216, 74, 0.65) 92%, transparent 92%);
  --card:       #FFFFFF;  /* 카드·말풍선 면 */

  /* 만화식 하드 섀도(블러 없는 오프셋) — 예능 자막판 문법 */
  --pop-shadow:       4px 4px 0 rgba(35, 39, 47, 0.9);
  --pop-shadow-small: 2px 2px 0 rgba(35, 39, 47, 0.9);

  /* ---------- 타이포그래피 ----------
     헤드라인: Jua(둥근 손글씨 — 예능 자막 감), 본문: Pretendard.
     CDN 실패(오프라인 file://) 시 시스템 라운드 폴백. */
  --font-head: "Jua", "BM JUA", "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 강의실 원거리 가독 기준 (뒷좌석에서 읽히는 크기) */
  --fs-hero:      clamp(2.75rem, 5vw, 4.25rem);  /* 오프닝 이름 */
  --fs-hook:      clamp(1.25rem, 2.2vw, 1.75rem);/* 훅 카피·클로징 문구 */
  --fs-station:   clamp(1.3rem, 2.2vw, 1.9rem);  /* 정거장 이름(길 위) */
  --fs-card-title:clamp(1.75rem, 3vw, 2.5rem);   /* 확대 카드 제목 */
  --fs-body:      clamp(1.05rem, 1.5vw, 1.35rem);/* 카드 본문(2~4문장) */
  --fs-num:       clamp(2.25rem, 4vw, 3.5rem);   /* 하이라이트 숫자 카운트업 */
  --fs-badge:     clamp(0.85rem, 1.1vw, 1rem);   /* 기술 배지 */
  --fs-caption:   0.875rem;                       /* 기간·파일 캡션·키 안내 */

  /* ---------- 형태 ---------- */
  --line: 2px;            /* 스케치 보더 굵기 (카드·배지·말풍선 공통) */
  --radius-card: 18px;
  --radius-pill: 999px;
  --tilt-1: -1.5deg;      /* 예능풍 미세 기울임 3종 — 이 3개 값만 사용, 임의 각도 금지 */
  --tilt-2: 1deg;
  --tilt-3: -3deg;

  /* ---------- 모션 ----------
     기존 플랫폼(차분한 감속)과 달리 이 프로젝트는 "통통 튀는" 오버슈트가 문법 */
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1); /* 카드 팝업·스티커·스탬프 등장 */
  --ease-move: cubic-bezier(0.22, 1, 0.36, 1);    /* 길 스냅 이동(팬)만 차분하게 */
  --dur-pop:   280ms;
  --dur-move:  700ms;     /* 정거장 간 스냅 스크롤 */
  --dur-count: 900ms;     /* 숫자 카운트업 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-pop: 0ms; --dur-move: 0ms; --dur-count: 0ms; }
}