/* 성지매니아 컬러 토큰 — docs/design.md 9장. 모든 색은 여기 변수로만 쓴다.
   브랜드 노랑은 면(버튼·히어로·선택 표시)에만. 흰 바탕 위 노란 글씨·노란 선은 쓰지 않는다 (대비 1.4:1). */
:root {
  /* 브랜드 — 메인 컬러는 한 화면에 강조 한두 곳만 */
  --brand:        #FFD60A;  /* Mania Yellow  메인 버튼 · 선택 표시 · 로고 */
  --brand-light:  #FFF4C2;  /* Yellow Light  썸네일 · 순위 강조 · 프로필 */
  --brand-tint:   #FFFBEA;  /* Yellow Tint   안 읽은 알림 · 선택된 선택지 */

  /* 텍스트 — 진할수록 중요한 정보 */
  --gray-900: #191F28;  /* 제목 · 본문 강조 · 검정 버튼 */
  --gray-800: #333D4B;  /* 본문 */
  --gray-700: #4E5968;  /* 보조 본문 · 회색 버튼 글씨 */
  --gray-600: #6B7684;  /* 설명 · 비활성 탭 */
  --gray-500: #8B95A1;  /* 메타 정보 · 캡션 */
  --gray-400: #B0B8C1;  /* 플레이스홀더 · 비활성 */

  /* 배경 · 선 — 면은 연하게, 선은 최소로 */
  --white:    #FFFFFF;  /* 기본 배경 */
  --gray-50:  #F9FAFB;  /* 카드 · 안내 박스 배경 */
  --gray-100: #F2F4F6;  /* 구분 띠 · 검색창 · 회색 버튼 */
  --line:     #F2F3F5;  /* 목록 구분선 · 헤더 선 */
  --gray-200: #E5E8EB;  /* 페이지 배경 · 연한 테두리 */
  --gray-300: #D1D6DB;  /* 입력창 · 칩 테두리 · 꺼진 토글 */

  /* 포인트 · 상태 — 카테고리와 상태에만 (진한 색 = 글씨, 연한 색 = 배경) */
  --red:          #F04452;  /* 베스트 · 신고 · 안 읽음 점 */
  --red-light:    #FFEEEE;  /* 연한 빨강 배경 */
  --red-dark:     #D22030;  /* 연한 빨강 위 글씨 */
  --blue:         #1B64DA;  /* Q&A · 인증 글씨 */
  --blue-light:   #E8F3FF;  /* Q&A · 인증 배경 */
  --green:        #03B26C;  /* 성공 · 진행 중 표시 */
  --green-light:  #E5F8EF;  /* 시세 · 답변완료 배경 */
  --green-dark:   #03804D;  /* 연한 초록 위 글씨 */
  --purple:       #6B3FD4;  /* 생활꿀팁 글씨 */
  --purple-light: #F3EEFF;  /* 생활꿀팁 배경 */

  /* 외부 브랜드 — 소셜 로그인 · 카톡 상담 버튼에만 */
  --kakao:        #FEE500;
  --kakao-text:   #191919;
  --naver:        #03C75A;

  /* 의미 별칭 — 화면 CSS 는 가능하면 이쪽을 쓴다 */
  --ink:        var(--gray-900);
  --ink-soft:   var(--gray-800);
  --ink-dim:    var(--gray-700);
  --muted:      var(--gray-600);
  --muted-soft: var(--gray-500);
  --placeholder: var(--gray-400);
  --bg:         var(--white);
  --bg-page:    var(--gray-200);
  --bg-card:    var(--gray-50);
  --bg-band:    var(--gray-100);
  --border:     var(--gray-300);
  --primary:    var(--brand);
  --primary-ink: var(--gray-900);   /* 노란 면 위 글씨는 항상 Gray 900 */
  --price-up:   var(--red-dark);    /* 기준보다 비쌈 */
  --price-down: var(--green-dark);  /* 기준보다 쌈 */
  --radius: 14px;

  /* 2026.10 리뉴얼 (mania-site_23 시안) — 노랑 계열 · 상태색 · 그림자 · 움직임 · 판 크기 */
  --brand-hover:  #FFDD33;  /* 노란 버튼 hover */
  --brand-soft:   #FFF8D6;  /* 고른 선택지 면 */
  --brand-pale:   #FFFCEB;  /* 목록 hover · 공지 줄 */
  --brand-chip:   #FFF4B8;  /* 기준가 · 추가할인 뱃지 */
  --brand-mark:   #FFE66B;  /* 형광펜 */
  --brand-deep:   #332A00;  /* 노란 면 위 진한 글씨 */
  --brand-olive:  #7E6900;  /* 노란 면 위 옅은 글씨 */
  --warn:         #F5B800;  /* 주의 동그라미 */
  --red-strong:   #E42939;  /* 비싸요 · 오류 · 상승 */
  --red-up:       #F04452;  /* 전일 대비 상승 화살표 */
  --blue-soft:    #EAF2FF;  /* 쿠팡 자급제 뱃지 면 */
  --blue-down:    #3182F6;  /* 전일 대비 하락 화살표 · 현재 위치 점 */
  --link-blue:    #2A62C9;  /* 게시판 댓글 수 · 탭 */
  --hot-red:      #D9381E;  /* 추천 수 많음 */
  --text-body:    #333D4B;
  --skt-bg: #EAEEFF; --skt: #2B3CC9;
  --kt-bg:  #EEF0F2; --kt:  #191F28;
  --lgu-bg: #FFEAF4; --lgu: #E6007E;
  --shadow:    0 4px 16px rgba(25,31,40,.07), 0 1px 3px rgba(25,31,40,.04);
  --shadow-lg: 0 14px 32px rgba(25,31,40,.12);
  --ease: cubic-bezier(.2,.8,.2,1);
  --shell: 1120px;
  --header-h: 72px;
}
@media (max-width: 768px) { :root { --header-h: 56px; } }