/* =====================================================================
   괴정제일교회 — 토큰 v3 : 간격·글자·선·모서리·모션
   tokens.css → tokens-v2.css → tokens-v3.css 순서로 불러옴. 같은 이름은 v3가 덮어씀.
   (간격·글자 단계·모션 체계)
   ===================================================================== */

:root{
  /* ---------- 간격: 8px 계열 (4px는 아이콘과 글자 사이에만) ---------- */
  --s-0: 4px;  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --section-y: 96px;          /* 1440 구역 위아래. 768: 72, 390: 56 (미디어쿼리에서 덮어씀) */

  /* ---------- 격자 ---------- */
  --grid-max: 1200px;  --grid-col: 78px;  --grid-gap: 24px;   /* 1440: 12열 */
  /* 768: 8열 (콘텐츠 704, 열 64, 간격 24) · 390: 4열 (콘텐츠 358, 열 76, 간격 18) */

  /* ---------- 글자 단계(광학 조정 포함) ---------- */
  --t-mast:   128px; --t-mast-lh: 1.00; --t-mast-ls: -0.045em;  /* 1440 제호 */
  --t-mast-t:  88px;                                            /* 768 */
  --t-mast-m:  48px; --t-mast-m-ls: -0.04em;                    /* 390 (320: 42) */
  --t-lede:    28px; --t-lede-lh: 1.50; --t-lede-ls: -0.02em;   /* 역사 문장(함렛) 1440 · 390은 21 */
  --t-h1:      44px; --t-h1-lh: 1.25; --t-h1-ls: -0.025em;      /* 하위 화면 h1 · 390은 32 */
  --t-h2:      32px; --t-h2-lh: 1.30; --t-h2-ls: -0.02em;       /* 구역 제목 · 390은 26 */
  --t-h3:      24px; --t-h3-lh: 1.40; --t-h3-ls: -0.01em;       /* 함렛 소제목, 비전 축 */
  --t-body:    18px; --t-body-lh: 1.70;
  --t-read:    20px; --t-read-lh: 1.85;                          /* 나눔지 본문 */
  --t-small:   16px; --t-small-lh: 1.60;
  --t-meta:    14px; --t-meta-lh: 1.50; --t-meta-ls: 0.01em;
  --t-time:    26px;                                             /* 홈 예배 시각(고딕 700 tabular) · 390은 22 */

  /* ---------- 선 ---------- */
  --rule-hair:   1px solid var(--c-line);      /* 행 구분 · 목록 */
  --rule-lead:   2px solid var(--c-ink);       /* 주요 블록 시작선(화면당 최대 2곳) */
  --rule-strong: 1px solid var(--c-line-strong);/* 입력칸 · 메뉴 hover 밑줄 */

  /* ---------- 모서리 (3단계만) ---------- */
  --r-s: 4px;    /* 꼬리표 */
  --r-m: 8px;    /* 사진 · 공식 이미지 · 입력칸 · 날짜 패 · 영상 표지 */
  --r-pill: 999px; /* 버튼 · 글씨 크기 */

  /* ---------- 버튼 한 가지 문법 ---------- */
  --btn-h: 48px; --btn-px: 24px; --btn-fs: 17px; --btn-border: 1.5px;

  /* ---------- 모션 ---------- */
  /* 관성 감속: 빠르게 출발해 길게 미끄러지며 멈춤 (화면 진입·시트·확대) */
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  /* 떠남: 천천히 출발해 빠르게 빠짐 (화면 퇴장·시트 닫기) */
  --ease-leave: cubic-bezier(0.4, 0, 0.9, 0.3);
  /* 반응: 누름·hover·밑줄 (짧고 단단함) */
  --ease-touch: cubic-bezier(0.2, 0, 0, 1);

  --m-press:  90ms;   /* 누름 피드백 */
  --m-quick: 160ms;   /* hover · 색 · 밑줄 */
  --m-leave: 200ms;   /* 퇴장 · 닫기 */
  --m-enter: 340ms;   /* 화면 진입 · 공유 제목 이동 */
  --m-sheet: 420ms;   /* 메뉴 시트 · 확대 보기 열기 */
  --m-overlap: 60ms;  /* 퇴장 시작 후 진입이 시작되는 지연(겹침) */

  --shift-route: 32px; /* 화면 전환 진입 이동량(390은 24) */
  --shift-leave: 16px; /* 퇴장 이동량 */
  --press-scale: 0.97; /* 버튼·행 눌림. 사진에는 쓰지 않음 */
}

@media (max-width: 1023px){
  :root{ --section-y: 72px; --t-mast: var(--t-mast-t); }
}
@media (max-width: 767px){
  :root{
    --section-y: 56px; --t-lede: 21px; --t-h1: 32px; --t-h2: 26px; --t-time: 22px;
    --shift-route: 24px; --shift-leave: 12px; --m-enter: 300ms; --m-sheet: 380ms;
  }
}

@media (prefers-reduced-motion: reduce){
  :root{
    --m-press: 0ms; --m-quick: 0ms; --m-leave: 0ms; --m-enter: 0ms; --m-sheet: 0ms; --m-overlap: 0ms;
    --shift-route: 0px; --shift-leave: 0px; --press-scale: 1;
  }
}