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

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

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

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

[data-site="머니콜"] {

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

  /* ★ 값만 블루로 교체했습니다(이름은 유지 — 이걸 참조하는 모든 토큰이 자동으로 파래집니다).
     출처: 케이뱅크 스타일 참고한 블루 램프. 대표색은 -600(#4262ff). */
  /* ★ 히어로 휴대폰 화면색(#685df9, 블루-바이올렛)을 대표색으로 한 보라 램프.
       이름은 유지 — 이걸 참조하는 모든 토큰이 자동으로 보라색이 됩니다. */
  --carrot-100: #f0eefe;
  --carrot-200: #e3ddfe;
  --carrot-300: #c7bcfd;
  --carrot-400: #a493fb;
  --carrot-500: #8676fa;
  --carrot-600: #685df9;   /* 대표 보라 (히어로 휴대폰 화면색) — 흰 글자 4.64:1 */
  --carrot-700: #4a34c9;   /* 흰 배경 위 강조 글씨 — 약 8:1 */
  --carrot-800: #3826a6;   /* 딥 (호버·띠) — 흰 글자 충분 */
  --carrot-900: #2a1c80;
  --carrot-1000: #170f4a;

  /* ★ 회색 램프를 '쿨그레이(네이비 기운)'로 교체했습니다.
     가이드.md 1장이 지정한 은행 톤 값입니다. 이름은 그대로 둡니다. */
  --gray-00:   #ffffff;
  --gray-100:  #f7f8f9;
  --gray-200:  #f3f6fc;   /* 섹션 배경 — 연한 쿨블루 */
  --gray-300:  #eeeff1;
  --gray-400:  #dcdee3;
  --gray-500:  #d1d3d8;
  --gray-600:  #b0b3ba;
  --gray-700:  #868b94;
  --gray-800:  #656b7a;   /* 보조 설명 — 흰 배경 5.33:1 */
  --gray-900:  #363c4d;   /* 본문 — 10.99:1 */
  --gray-1000: #171b28;   /* 제목 — 17.16:1 */

  /* 푸터 전용 딥네이비 — gray-900 보다 훨씬 어둡습니다 (가이드.md --footer-bg) */
  --navy-1000: #0f1730;

  /* 케이뱅크 페이지 바탕색(실측 #e4edf9).
     흰 바탕이 아니라 이 연블루 위에 흰 카드가 떠 있는 구조입니다. */
  --sky-100: #e4edf9;

  --blue-700: #7c5cf7;
  --blue-800: #5a3fd0;
  --green-700: #079171;
  --green-800: #00745f;
  --red-800:  #ca1d13;
  --red-900:  #921708;
  --red-100:  #fdf0f0;
  /* 가이드.md 의 '주의' 색(#f0475a) 계열.
     -600 은 흰 배경 3.65:1 이라 면·테두리 전용이고, 글자는 -700 을 씁니다. */
  --red-600:  #f0475a;
  --red-700:  #c92338;   /* 글자용 — 5.55:1 */
  --red-50:   #fdeef0;
  --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);
  /* 넓게 칠하는 파란 면. 위에 얹는 글자는 흰색입니다(4.75:1). */
  --brand-500: var(--carrot-600);   /* 버튼·카드머리 — 대표 블루 */
  --brand-600: var(--carrot-700);   /* 눌렀을 때(hover) */
  --brand-700: var(--carrot-800);   /* 더 진하게 — 상단 띠·중간 CTA 밴드 */
  --brand-vivid: var(--carrot-600);

  /* ★★ 흰 배경 위 파란 글씨는 대표 블루가 아니라 한 단계 진한 색을 씁니다. ★★
     대표 블루(#4262ff)는 흰 배경에서 4.75:1 이라 큰 글씨는 되지만
     작은 강조 글씨에는 빠듯합니다. carrot-700(#2a3ccf)은 7.94:1 로 여유가 있고
     가이드.md 1장이 --brand-ink 로 지정한 값이기도 합니다. */
  --brand-ink: var(--carrot-700);
  --brand-ink-small: var(--carrot-700);   /* 옛 이름 호환용 — 같은 색입니다 */

  /* 파란 면 위 글자 = 흰색 */
  --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);

  /* ---------- 면 ----------
     ★ 페이지 바탕은 화이트입니다(삼쩜삼 방식 · 첨부 시안).
       섹션 구분은 연한 쿨그레이(--surface-alt)와 얇은 선으로만 합니다. */
  --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(--navy-1000);  /* 딥네이비 — 흰 글자 17.71:1 */

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

  /* ---------- 경고 블록 (사칭 주의 등) ----------
     ★ -500 은 면·테두리·아이콘 전용입니다. 글자에는 -600 을 쓰세요. */
  --accent-500: var(--red-600);   /* 3.65:1 — 글자 금지 */
  --accent-600: var(--red-700);   /* 5.55:1 — 글자용 */
  --accent-50:  var(--red-50);

  /* ---------- 아이콘 색 (항목마다 다르게 — 당근도 여러 색을 씁니다) ----------
     전부 흰 배경에서 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);  /* 선 전용 (글자 아님) */

  /* 사진 위에 글자를 얹을 때 쓰는 가림막 — 브랜드 블루입니다.
     (carrot-800 #1c2fb5 · carrot-900 #16248f 와 같은 색을 알파만 넣어 씁니다)
     반투명이라 hex 토큰으로는 표현이 안 돼 rgba 로 둡니다. --scrim 과 같은 예외입니다. */
  --photo-scrim-top:    rgba(28, 47, 181, .34);
  --photo-scrim-bottom: rgba(11, 21, 80, 1);

  /* 히어로 상단 사진 위에 까는 막은 딥네이비를 유지합니다(브랜드 톤).
     위 --photo-scrim-* 은 USP 카드 전용 검정막입니다. 둘을 섞지 마세요. */
  --hero-scrim-1: rgba(11, 21, 48, .92);
  --hero-scrim-2: rgba(11, 21, 48, .72);
  --hero-scrim-3: rgba(11, 21, 48, .58);

  /* 모바일 메뉴 뒤 어두운 막 */
  --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));
}