/* 오빠 변했어 — 디자인 토큰 SoT (docs/HARNESS.md §3)
   원천: site/index.html 실사용 팔레트 승격. 사이트·앱 공유. 임의 색 추가 금지. */
:root{
  /* crayon 팔레트 */
  --cray-red:#E8573F;
  --cray-green:#5BA854;
  --cray-green-d:#47913F;
  --cray-blue:#4A90D9;
  --cray-yellow:#F5C542;
  --cray-pink:#FF6B8A;

  /* 종이·잉크 */
  --ink:#3A342E;
  --edge:rgba(58,52,46,.30);  /* B안 연필선 — 보더는 잉크 대신 이 토큰 (대표 확정 2026-08-17) */
  --sub:#8A8177;
  --line:#D9CFC1;
  --paper:#FBF6EC;
  --card:#FFFDF6;
  --scrim:rgba(253,249,240,.82);

  /* 타이포 */
  --font-hand:"Gaegu","Apple SD Gothic Neo",sans-serif;      /* 헤드라인·말풍선·숫자 강조 */
  --font-body:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* 형태 언어 */
  /* [상향 2026-08-16] 전반적으로 더 둥글게 (대표 확정) — .btn/.card/.wobble 이 전부
     이 토큰을 참조하므로 여기 두 줄로 일괄 처리한다. --radius-pill·입력창은 불변. */
  --wobble:24px 28px 22px 30px / 28px 22px 30px 24px;
  --wobble-lg:28px 34px 26px 32px / 32px 26px 34px 28px;
  --tilt-l:rotate(-1.2deg);
  --tilt-r:rotate(1.1deg);
  --shadow-card:0 4px 18px rgba(90,70,40,.10);
  --shadow-pop:0 8px 14px rgba(90,70,40,.22);

  /* 간격·크기 */
  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:22px; --sp-5:34px;
  --tap-min:48px;              /* 최소 터치 타깃 */
  --radius-pill:999px;

  /* [개정 2026-08-17 v4] 셸 토큰 — 캡슐 네비 실측 (SPEC-DESIGN-V4 §2-3, C2·C3·C10)
     C2: --nav-h = 캡슐 실측 높이(테두리 포함, safe-area·inset 제외).
         실측 근거 — 아이콘 30 + gap 2 + 라벨 13px*1.25(Gaegu hhea normal line-height,
         (760+240+250)/1000 — Android WebView/Chrome 기준) = 16.25 + 버튼 상하 패딩 5*2
         + 캡슐 패딩 8*2 + 테두리 2.5*2 = 79.25 ≈ 79px.
         base.css #nav 변경 시 같은 커밋에서 함께 갱신할 것. */
  --nav-h:79px;
  --fab-size:56px;     /* 64 → 56 (대표 확정 B) */
  --fab-gap:16px;      /* 14 → 16 */
  --nav-inset:16px;    /* 캡슐이 화면 가장자리에서 뜨는 거리 (C10) */

  /* [신설 2026-08-17 v4] 모션 토큰 (C9) — "장난스럽지만 고급" */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --dur-quick:200ms; --dur-move:320ms; --dur-pop:400ms;
}
@font-face{
  font-family:"Gaegu";
  src:url("../assets/fonts/Gaegu-Bold.ttf") format("truetype");
  font-weight:700; font-display:swap;
}
/* 공유 카드 전용 손글씨 (2026-08-25) — 스토리 카드 시안(scene-set.html)이 쓰던 얇은 펜 글씨.
   Gaegu(굵은 크레용)와 역할이 다르다: 카드의 문구·날짜·브랜드 줄은 이 폰트라야 시안과 같아진다.
   캔버스가 쓰려면 document.fonts 에 실제로 로드돼 있어야 해서 @font-face 로 등록한다. */
@font-face{
  font-family:"Nanum Pen Script";
  src:url("../assets/fonts/NanumPenScript-Regular.ttf") format("truetype");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url("../assets/fonts/Caveat-Medium.ttf") format("truetype");
  font-weight:500; font-display:swap;
}