/* ============================================================
   Onsoon Labs 디자인 토큰 — 사이트 전체의 단일 원본

   컴포넌트에 리터럴 px/rem을 직접 쓰지 않는다. 모든 수치는 var()로 참조한다.
   근거: design-slop-checklist.md §2 토큰 계약

   타입 스케일만 체크리스트 §2 값에서 조정했다. §2의 6단계(13/15/17/22/32)는
   15→17이 1.133배라 §1 T1(인접 비 1.15 이상)을 스스로 통과하지 못한다.
   단계 수와 의도는 유지하고 수치만 T1을 통과하도록 다시 잡았다.
   ============================================================ */

:root{
  /* --- 지면 --------------------------------------------------
     액센트가 아닌 중성색. hue 카운트(C1) 대상이 아니다. */
  --bg:        #ffffff;
  --ink:       #1f1e1c;
  --ink-soft:  #6b655e;
  --line:      #e7e2da;
  --card:      #ffffff;
  --shadow:    0 12px 32px rgba(60,40,20,.09);

  /* --- 액센트 — hue 3개가 전부 (C1) --------------------------
     clay  ≈  7~14°  CTA·로고·강조
     butter≈ 43°     붓 밑줄
     leaf  ≈ 82~98°  손그림 식물
     -soft는 같은 hue의 밝은 톤이지 네 번째 색이 아니다.
     제품별 액센트 색은 두지 않는다 — 카드마다 다른 색은 템플릿 시그널(C2). */
  --acc-clay:       #df5a48;
  --acc-clay-soft:  #e2a08b;
  --acc-butter:     #eec25f;
  --acc-leaf:       #7d9e6a;
  --acc-leaf-soft:  #b9cba4;

  /* --- 타입 — 6단계. 인접 비 1.154 / 1.167 / 1.2 / 1.238 ----- */
  --t-xs:      .8125rem;    /* 13px  태그·캡션 */
  --t-sm:      .9375rem;    /* 15px  보조 */
  --t-base:    1.09375rem;  /* 17.5px 본문 */
  --t-lg:      1.3125rem;   /* 21px  카드·항목 제목 */
  --t-xl:      1.625rem;    /* 26px  섹션 제목 */
  --t-display: clamp(1.9rem, 4.6vw, 3.25rem);

  /* --- 굵기 — 400을 본문에 실제로 쓴다 (T2) ------------------ */
  --w-body:    400;
  --w-label:   500;
  --w-title:   700;
  --w-display: 800;   /* display 한 곳에만 */

  /* --- 행간 — 3종 (T3) --------------------------------------- */
  --lh-tight: 1.15;   /* display */
  --lh-title: 1.3;
  --lh-body:  1.65;

  /* --- 여백 — 8의 배수만 (S1) -------------------------------- */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 96px;  --s8: 144px;

  /* --- 모서리 — 2개 + pill (R1) ------------------------------ */
  --r-sm:   8px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* --- 모션 — duration 2개, curve 1개 (M1·M2) ----------------
     --dur      상태 전환(색·보더)
     --dur-slow 시그니처 밑줄 연출 한 번 */
  --dur:      .22s;
  --dur-slow: .5s;
  --ease:     cubic-bezier(.2,.8,.2,1);

  /* --- 컨테이너 — 2종 (L1) -----------------------------------
     굵기 토큰(--w-body 등)과 헷갈리지 않도록 --maxw- 접두사를 쓴다. */
  --maxw-text: 1040px;
  --maxw-wide: 1240px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #1a1a1c;
    --ink:       #edeae6;
    --ink-soft:  #a49f98;
    --line:      #312f2b;
    --card:      #212022;
    --shadow:    0 12px 32px rgba(0,0,0,.4);

    --acc-clay:      #f07a68;
    --acc-clay-soft: #7d4f40;
    --acc-butter:    #8a6f2a;
    --acc-leaf:      #6a8759;
    --acc-leaf-soft: #5a6a4c;
  }
}

/* ===== reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-base);
  font-weight:var(--w-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== L2 — 모션을 끈 사용자에게는 전부 끈다 ===== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}