/* 첫열매들 미니솔루션 — 공용 디자인 토큰
 *
 * 값의 출처(SSOT)는 firstfruits-design 저장소입니다.
 * 색을 바꾸고 싶으면 이 파일이 아니라 firstfruits-design 에서 먼저 바꾸고,
 * 그 결과를 여기로 내려받습니다. 자세한 절차는 docs/design-system.md 참고.
 *
 * ⚠️ 2026-10-03 현재 firstfruits-design 은 토큰을 demo/styles.css 안에만 들고 있어서
 *    배포 가능한 파일이 없습니다. 그래서 지금은 값을 여기에 복사해 둡니다.
 *    design 저장소가 dist/tokens.css 를 Cloudflare Pages 로 서빙하기 시작하면
 *    이 블록을 지우고 <link> 한 줄로 바꿉니다.
 */
:root {
  /* 바탕 */
  --canvas: #fafaf8;
  --surface: #ffffff;
  --secondary: #f8f8f4;

  /* 글자 */
  --ink: #443e3b;
  --primary: #443f3d;
  --deep: #22201f;
  --muted: #6f6e6e;

  /* 강조 */
  --gold: #d2b983;
  --gold-ink: #786238;

  /* 선·모양 */
  --line: #e6e6e6;
  --radius: 12px;

  /* 글꼴 */
  --body: 'Noto Sans KR', 'Noto Sans Korean', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --latin: 'Poppins', var(--body);

  /* 상태 — design 저장소에 아직 정의가 없어 website/theme.css 값을 따랐습니다.
     design 쪽에 추가되면 그 값으로 교체합니다. */
  --error: #b84a3a;
}

/* ── 호환 별칭 ────────────────────────────────────────────────────────────
 * 아임웹 위젯(firstfruits-imweb)의 CSS 는 --ff-* 이름을 씁니다.
 * 같은 마크업을 양쪽에서 재사용할 수 있도록 별칭을 둡니다.
 * ⚠️ 아래 네 개는 두 저장소의 값이 실제로 다릅니다. 지금은 design 값을 정답으로
 *    삼았으므로, 위젯을 이 토큰으로 옮기면 배경·테두리·보조 글자색이 미세하게
 *    바뀝니다. 바꾸기 전에 docs/design-system.md 의 "토큰 갈라짐" 표를 확인하세요.
 */
:root {
  --ff-main: var(--primary);
  --ff-main-deep: var(--deep);      /* website: #312E2C  ≠ design: #22201f */
  --ff-gold: var(--gold);
  --ff-gold-soft: #f5f0e5;          /* design 에 대응 토큰 없음 */
  --ff-bg: var(--canvas);           /* website: #FAF9F6  ≠ design: #fafaf8 */
  --ff-white: var(--surface);
  --ff-text: var(--ink);            /* website: #443F3D  ≠ design: #443e3b */
  --ff-sub: var(--muted);           /* website: #807A76  ≠ design: #6f6e6e */
  --ff-border: var(--line);         /* website: #E6E1DA  ≠ design: #e6e6e6 */
  --ff-error: var(--error);
}

/* ── 최소 기본값 ──────────────────────────────────────────────────────────
 * 미니솔루션은 각자 독립된 페이지이므로 아임웹과 달리 바탕 스타일이 없습니다.
 * 모든 솔루션이 같은 출발점을 갖도록 여기서만 정의합니다.
 */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.7 var(--body);
  word-break: keep-all;
}

button, input, select, textarea { font: inherit; }
button, a { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }