/* 완주잇다 — 디자인 토큰. 공개 앱과 관리자가 함께 쓴다. 값은 여기서만 바꾼다.
   2판(2026-10): 맑은 회색 바탕 위에 흰 카드를 올리고, 숲 민트로 이끌고 곶감 주황으로 짚는다.
   그림은 3D 그래픽(img/3d/*.webp)과 선 아이콘(js/ui/icons.js) 두 갈래, 글자는 rem 이라 글자 크기 단계(html[data-fs])를 따른다. */
:root {
  /* color — 바탕·면 */
  --c-bg: #f2f4f6;        /* 화면 바탕(카드 사이) */
  --c-bg-deep: #e8ebee;   /* 눌림·트랙·자리표시 */
  --c-surface: #ffffff;   /* 카드 */
  --c-surface-2: #f6f7f9; /* 카드 안 칸 */
  /* color — 글자(흰 카드 기준 대비: ink 16:1, ink-2 7:1, ink-3 5.4:1 / 회색 바탕 4.9:1) */
  --c-ink: #191f28;
  --c-ink-2: #4e5968;
  --c-ink-3: #5f6b78;
  --c-ink-4: #9aa3ae;     /* 꾸밈 점·자리표시 선 전용(글자 금지) */
  --c-line: #e8ebee;
  --c-line-strong: #d4d9de;
  /* color — 이끄는 색: 숲 민트. 글자·단추는 primary(흰 바탕 5:1, 흰 글자 5:1), 밝은 brand 는 꾸밈 전용 */
  --c-primary: #0a7f63;
  --c-primary-strong: #076650;
  --c-primary-soft: #e3f5ee;
  --c-brand: #18b98b;
  --c-on-primary: #ffffff;
  /* color — 짚는 색: 곶감 주황. accent 는 꾸밈, 글자는 accent-text(흰 바탕 5.2:1) */
  --c-accent: #ff7a3d;
  --c-accent-soft: #fff1e9;
  --c-accent-text: #c2410c;
  --c-info: #1b64da;
  --c-info-soft: #e9f1fd;
  --c-danger: #c92a2a;
  --c-danger-soft: #fdeded;
  --c-overlay: rgba(25, 31, 40, 0.5);
  /* color — 머리 띠(화면 맨 위 옅은 칸) */
  --c-tint-mint: #ddf4eb;
  --c-tint-sky: #e4eefb;
  --c-tint-peach: #ffefe6;
  --c-splash: #bae6e1;    /* 스플래시 그림의 맨 위 하늘색(그림을 받기 전 바탕, manifest background_color 와 같다) */

  /* 카테고리 색 (content.json categories[].color 와 같은 값. 흰 글자·흰 바탕 모두 4.5:1 이상) */
  --c-cat-nature: #1e7b48;
  --c-cat-walk: #0b7a86;
  --c-cat-sight: #3b5bdb;
  --c-cat-experience: #7048e8;
  --c-cat-local: #c2410c;
  --c-theme: #076650; /* 「오늘, 완주」 테마 코스 표지 (카테고리가 없는 테마용) */

  /* 난이도(막대 꾸밈. 글자는 따로 쓴다) */
  --c-easy: #20a46b;
  --c-normal: #f0a000;
  --c-hard: #f04452;

  /* type — 모두 rem: 브라우저·기기 글자 크기와 앱의 글자 크기 단계를 그대로 따른다.
     이름의 숫자는 rem 이 16px 일 때의 px 이다. 앱 기본 단계(보통)는 106.25% 라 실제로는 약 6% 크다(본문 17px, 최소 14.9px). */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --fs-12: 0.75rem;   /* 탭 이름·보조 라벨 전용 (본문 금지) */
  --fs-13: 0.8125rem; /* 캡션·배지 */
  --fs-14: 0.875rem;  /* 본문 최소·보조 설명 */
  --fs-15: 0.9375rem; /* 목록 설명 */
  --fs-16: 1rem;      /* 본문·목록 이름 */
  --fs-17: 1.0625rem; /* 화면 머리 제목 */
  --fs-18: 1.125rem;  /* 카드 제목 */
  --fs-20: 1.25rem;   /* 구획 제목 */
  --fs-22: 1.375rem;  /* 큰 숫자 */
  --fs-24: 1.5rem;    /* 화면 제목 */
  --fs-26: 1.625rem;  /* 상세 제목 */
  --fs-28: 1.75rem;   /* 첫 화면 제목 */
  --fs-30: 1.875rem;  /* 이야기 제목 */
  --fs-36: 2.25rem;   /* 진행 숫자 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-body: 1.6;
  --ls-tight: -0.025em;
  --ls-normal: -0.01em;

  /* space (4px 기준) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --gutter: 20px;      /* 카드 안 좌우 여백, 띠 화면의 좌우 여백 */
  --card-x: 12px;      /* 카드 바깥 좌우 여백(화면 가장자리와 카드 사이) */
  --card-gap: 12px;    /* 카드와 카드 사이 */

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-btn: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 3px rgba(25, 31, 40, 0.05);
  --shadow-2: 0 6px 24px rgba(25, 31, 40, 0.1);
  --shadow-sheet: 0 -8px 32px rgba(25, 31, 40, 0.14);

  /* layout */
  --app-max: 480px;
  --header-h: 56px;
  --tabbar-h: 62px;
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 380ms;
}

/* 글자 크기 단계. 브라우저·기기 글자 크기(대개 16px)에 곱한다(js/fs.js 가 저장한 값을 첫 그림 전에 붙인다).
   작게 100% · 보통 106.25%(기본) · 크게 118.75% · 더 크게 131.25% · 가장 크게 143.75% */
html { font-size: 106.25%; }
html[data-fs="-1"] { font-size: 100%; }
html[data-fs="1"] { font-size: 118.75%; }
html[data-fs="2"] { font-size: 131.25%; }
html[data-fs="3"] { font-size: 143.75%; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}