/* 터짐연구소(터짐랩) 디자인 토큰 — 홈페이지·웹 한 벌
   값마다 어디서 왔는지는 README.md 표. 색은 이 :root 한 곳에만 두고 밖에서는 var() 만 쓴다. */

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

/* 제목 글꼴 — Paperlogy 9 Black(SIL OFL 1.1), 한글 KS X 1001 2,350자 + ASCII 로 줄인 판 130KB. 고른 이유 README '글꼴' · 비교판 ../site/_shots/font-compare.png (10/27 정큐 15번) */
@font-face {
  font-family: "Paperlogy";
  src: url("./fonts/Paperlogy-9Black-KS.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 색: 바탕 ── */
  --tj-pearl: #E9E9E6;        /* 프로필 사진 바탕(233,233,230) = 진주빛 은회색 */
  --tj-paper: #FAFAFA;        /* 게시물 모눈종이 바탕(250,250,250) */
  --tj-white: #FFFFFF;        /* 스티커 테두리·메모지·카드 면 */
  /* ── 색: 글자 ── */
  --tj-ink: #111214;          /* 큰 제목·본문. 진주 위 대비 16.0:1 */
  --tj-ink-2: #45464B;        /* 둘째 글. 진주 위 7.6:1 · 종이 위 9.1:1 */
  /* ── 색: 강조(뜻이 정해진 둘) ── */
  --tj-yellow: #F7DA56;       /* 형광펜 하나 — 큰 제목의 한 낱말에만(게시물 '무조건' 형광 247,218,86) */
  --tj-blue: #1A20C3;         /* 실험실 파랑 — 'lab' 라벨·TJ 번호 잉크(26,32,195). 작은 표시 글자에만 */
  --tj-sky: #D6E6F5;          /* 파란 메모지 — 게시물 숫자 카드 종이 */
  /* ── 색: 선·그림자 ── */
  --tj-grid: rgba(17, 18, 20, 0.07);        /* 모눈 가는 선 */
  --tj-grid-strong: rgba(17, 18, 20, 0.12); /* 모눈 5칸마다 굵은 선 */
  --tj-line: rgba(17, 18, 20, 0.16);        /* 알약·카드 테두리 */
  --tj-mask: #000000;                       /* CSS mask 용(보이는 색 아님) */
  --tj-clear: rgba(0, 0, 0, 0);
  --tj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.10), 0 6px 14px rgba(0, 0, 0, 0.10);   /* 스티커·메모 */
  --tj-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.16);  /* 카드·폴라로이드 */
  --tj-drop: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));   /* 오린 스티커(모양 따라) */
  --tj-tape: rgba(255, 255, 255, 0.62);     /* 메모지 테이프(반투명 흰) */
  --tj-veil: rgba(233, 233, 230, 0.86);     /* 메뉴 판 뒤 진주빛 막 */

  /* ── 글꼴 ── */
  --tj-font: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;          /* 본문·단추 — 읽기 */
  --tj-font-display: "Paperlogy", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;   /* 큰 제목·구간 제목·상단 글 */
  --tj-w-body: 500;
  --tj-w-strong: 700;
  --tj-w-display: 900;

  /* ── 글자 크기: 세 단계뿐(디자인 기준 #5) ── */
  --fs-display: clamp(40px, 5.6vw, 84px);   /* 큰 제목·업종 이름 — 390폭 40px · 1440폭 80.6px */
  --fs-body: 18px;                           /* 본문·단추 (폰 17px) */
  --fs-small: 14px;                          /* 표시·안내 (최소 13 위) */
  --lh-display: 1.04;
  --lh-body: 1.5;
  --ls-display: -0.02em;   /* Paperlogy 는 이미 좁아 덜 당김 */

  /* ── 간격(4의 배수) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;
  --gutter: clamp(20px, 4.9vw, 70px);        /* 화면 가장자리 — 1440에서 70px(레퍼런스 4번 여백) */
  --grid-cell: 24px;                         /* 모눈 한 칸 */

  /* ── 둥글기 ── */
  --r-pill: 999px;   /* 단추·알약 메뉴 */
  --r-card: 28px;    /* 업종 카드 */
  --r-memo: 6px;     /* 메모지 */
  --r-photo: 4px;    /* 폴라로이드 사진 */

  /* ── 누르는 것 ── */
  --tap: 52px;       /* 단추 높이(바닥 44 위) */

  /* ── 움직임 시간 ── */
  --dur-1: 160ms;    /* 누름 반응 */
  --dur-2: 320ms;    /* 떠오름·밑줄 */
  --dur-3: 640ms;    /* 카드 들어옴 */
  --dur-4: 1200ms;   /* 형광펜 긋기 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 말랑하게 넘쳤다 돌아옴 */
}

@media (max-width: 600px) {
  :root { --fs-body: 17px; }
}