/* ============================================================
   01. 브랜드 토큰 — 비상금마켓
   ------------------------------------------------------------
   당근 디자인시스템(carotene)의 라이트 모드 팔레트를 그대로 가져왔습니다.
   (daangn.com 에서 실측, 2026-07-21)

   구조는 Material Design 3 방식의 2계층입니다.
     1계층 참조 팔레트 : 당근 원본 색. 절대 수정하지 않습니다.
     2계층 의미 토큰   : 1계층에서 "골라 쓰기만" 합니다.

   ★ 규칙 ★
   2계층과 나머지 CSS 어디에서도 색상 코드를 직접 쓰지 않습니다.
   반드시 1계층 이름을 가리킵니다. 팔레트에 없는 색은 쓰지 않습니다.

   ※ 색과 분위기만 참고합니다. 당근의 로고·일러스트·상표는 쓰지 않습니다.
   ============================================================ */

[data-site="비상금마켓"] {

  /* ══════════ 1계층 · 당근 참조 팔레트 (원본 그대로) ══════════ */

  --carrot-100: #fff2ec;
  --carrot-200: #ffe8db;
  --carrot-300: #ffd5c0;
  --carrot-400: #ffb999;
  --carrot-500: #ff9364;
  --carrot-600: #ff6600;   /* 당근 대표 주황 */
  --carrot-700: #e14d00;
  --carrot-800: #b93901;
  --carrot-900: #862b00;
  --carrot-1000: #471601;

  --gray-00:   #ffffff;
  --gray-100:  #f7f8f9;
  --gray-200:  #f3f4f5;
  --gray-300:  #eeeff1;
  --gray-400:  #dcdee3;
  --gray-500:  #d1d3d8;
  --gray-600:  #b0b3ba;
  --gray-700:  #868b94;
  --gray-800:  #555d6d;
  --gray-900:  #2a3038;
  --gray-1000: #1a1c20;

  --blue-700: #217cf9;
  --blue-800: #135fcd;
  --green-700: #079171;
  --green-800: #00745f;
  --red-800:  #ca1d13;
  --red-900:  #921708;
  --red-100:  #fdf0f0;
  --purple-800: #6d50cb;
  --yellow-800: #755b22;

  /* ══════════ 2계층 · 의미 토큰 (1계층에서 고르기만) ══════════ */

  /* ---------- 브랜드 ---------- */
  /* 배경 장식용 — 글자가 얹히지 않는 자리에만 씁니다 */
  --deco-1: var(--carrot-200);
  --deco-2: var(--carrot-300);
  --deco-3: var(--gray-300);

  --brand-50:  var(--carrot-100);
  --brand-100: var(--carrot-200);
  --brand-400: var(--carrot-400);
  /* ★★ 당근 색을 그대로 씁니다 (사용자 결정) ★★
     carrot-600(#ff6600) + 흰 글씨 = 대비 2.94:1
     → WCAG AA 최소 기준(큰 굵은 글씨 3:1)에 0.06 미달입니다.
       당근도 실제로 이 상태로 운영 중이며, 브랜드 일치를 우선해 그대로 채택했습니다.
       저시력·고령 이용자가 버튼 글자를 읽기 어려울 수 있다는 점은 인지된 사항입니다.
     자세한 내용은 당근규격.md 7장 참고. */
  --brand-500: var(--carrot-600);   /* 버튼·카드머리 — 당근 대표 주황 */
  --brand-600: var(--carrot-700);   /* 눌렀을 때(hover) */
  --brand-700: var(--carrot-700);   /* 더 진하게 */
  --brand-vivid: var(--carrot-600);

  /* ★★ 주황 글씨는 크기와 무관하게 전부 당근 원본색(#ff6600)입니다. ★★
     예전에는 작은 글씨용으로 진한 벽돌색(carrot-800)을 따로 뒀는데,
     대비는 좋지만 색이 죽어서 당근 느낌이 나지 않았습니다.
     "당근 색 그대로 쓴다"는 결정에 맞춰 한 가지로 통일했습니다.

     대가: 흰 배경에서 2.94:1 이라 WCAG AA 에 미달합니다.
       (작은 글씨 기준 4.5 · 큰 굵은 글씨 기준 3.0)
       저시력·고령 이용자가 주황 글씨를 읽기 어려울 수 있다는 점은
       인지하고 받아들인 사항입니다. 당근규격.md 7장 참고.
     --brand-ink-small 은 없앴습니다. 새로 만들지 마세요. */
  --brand-ink: var(--carrot-600);
  --brand-ink-small: var(--carrot-600);   /* 옛 이름 호환용 — 같은 색입니다 */

  /* 주황 면 위 글자 = 흰색 (당근 규칙) */
  --on-brand:  var(--gray-00);
  --on-vivid:  var(--gray-00);
  --on-accent: var(--gray-00);

  /* ---------- 글자 ---------- */
  --ink-900: var(--gray-1000);  /* 제목 */
  --ink-700: var(--gray-900);   /* 본문 */
  --ink-500: var(--gray-800);   /* 보조 설명 — 흰 배경 6.6:1 */
  --ink-300: var(--gray-700);   /* 장식 전용 — 3.4:1 이라 읽는 글자 금지 */
  --ink-invert: var(--gray-00);

  /* ---------- 면 ---------- */
  --bg:          var(--gray-00);
  --surface:     var(--gray-00);
  --surface-soft: var(--gray-100);
  --surface-alt: var(--gray-200);   /* 섹션 배경 */
  /* 당근 카드의 이미지 영역 바탕 — 실측 #f2f0ef (따뜻한 회색) */
  --surface-warm: #f2f0ef;
  --line:        var(--gray-300);   /* 구분선 */
  --line-strong: var(--gray-400);
  --footer-bg:   var(--gray-900);

  /* ---------- 상태색 (전부 흰 배경 4.5:1 이상) ---------- */
  --success: var(--green-800);   /* 5.73:1 */
  --danger:  var(--red-800);     /* 5.68:1 */
  --warning: var(--yellow-800);  /* 6.41:1 */

  /* ---------- 경고 블록 ---------- */
  --accent-500: var(--red-800);
  --accent-600: var(--red-900);
  --accent-50:  var(--red-100);

  /* ---------- 아이콘 색 (항목마다 다르게 — 당근도 여러 색을 씁니다) ----------
     전부 흰 배경에서 3:1 이상 확보된 색만 씁니다. */
  --ico-1: var(--carrot-700);  /* 3.99:1 — 아이콘은 글자가 아니라 3:1 기준 */
  --ico-2: var(--blue-800);    /* 5.92:1 */
  --ico-3: var(--green-800);   /* 5.73:1 */
  --ico-4: var(--purple-800);  /* 5.73:1 */
  --ico-5: var(--red-800);     /* 5.68:1 */
  --ico-6: var(--yellow-800);  /* 6.41:1 */

  /* ---------- 어두운 면 위 글자 ----------
     푸터·CTA 띠처럼 --footer-bg(#2a3038) 위에 올라가는 글자입니다.
     ★ 반투명 흰색은 실제로는 배경과 섞인 회색이 됩니다.
       .45 는 3.99:1 로 미달이라 쓰지 않습니다. .55 가 하한선입니다. */
  --on-dark:      var(--gray-00);            /* 15.5:1 */
  --on-dark-mid:  rgba(255, 255, 255, .72);  /* 7.7:1 */
  --on-dark-weak: rgba(255, 255, 255, .55);  /* 5.2:1 — 이보다 낮추지 마세요 */
  --on-dark-line: rgba(255, 255, 255, .14);  /* 선 전용 (글자 아님) */

  /* 모바일 메뉴 뒤 어두운 막 */
  --scrim: rgba(0, 0, 0, .45);
  --scrim-strong: rgba(0, 0, 0, .78);

  /* 그림자에 쓰는 색 (gray-1000) */
  --shadow-rgb: 26, 28, 32;

  /* ---------- 외부 브랜드색 (의도된 예외) ----------
     카카오 공식 색입니다. 당근 팔레트가 아니지만
     카톡 버튼은 카카오 색을 써야 알아봅니다. */
  --kakao-bg:  #fee500;
  --kakao-ink: #191600;

  /* ---------- 폰트 ----------
     당근은 시스템 폰트를 쓰지만 한글 가독성은 Pretendard 가 낫습니다.
     ★ "Pretendard Subset" 은 프로젝트 폴더 안에 넣어둔 파일입니다
       (font/Pretendard-subset.woff2 · 10-base.css 의 @font-face 참고).
       외부 서버(CDN)는 쓰지 않습니다.

     ★★ 여기에 다른 프리텐다드(CDN 판 등)를 추가하지 마세요.
       글꼴이 두 벌이면 늦게 도착한 쪽이 나중에 끼어들면서
       글자가 한 번 바뀌어 보입니다. 그게 깜빡임입니다.
       "Pretendard Subset" 하나만 씁니다. 그 뒤는 글꼴 파일을 아예 못 받았을 때
       쓰이는 시스템 글꼴입니다. (자세한 이유는 10-base.css 첫머리) */
  --font-sans: "Pretendard Subset",
               -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---------- 상단 배너 ----------
     당근은 주황을 넓게 칠하지 않습니다. 연회색 면 + 제목 아래 짧은 주황 선. */
  --hero-band: var(--surface-alt);
  --hero-pattern: none;

  --brand-gradient: linear-gradient(135deg, var(--carrot-600), var(--carrot-800));
}