/* ╔══════════════════════════════════════════════════════╗
   ║  ★★★ 테마 설정 - 여기서만 수정하면 전체 반영 ★★★  ║
   ╚══════════════════════════════════════════════════════╝

   my.ebut.co.kr 통합계정 허브
   페이똑딱 assets/css/theme.css 를 가져와 이름만 variables.css 로 바꿨다
   (워크스페이스 표준 파일명). 값은 페이똑딱 그대로다.

   ★★ --primary 는 현재 네이버 그린(#03C75A)과 같은 값이다.
      2단계 소셜 로그인 버튼과 색이 겹치므로
      이벗 자체 브랜드색으로 교체해야 한다.

      교체할 때는 --primary 와 --primary-rgb 를 함께 바꾼다.
      --naver-green / --kakao-yellow 는 브랜드 고정값이라 건드리지 않는다.

   ※ rgba() 는 CSS 변수로 합성이 안 되므로 RGB 삼원색을 따로 둔다.
      rgba(var(--primary-rgb), 0.12) 형태로 쓴다.
      색을 바꿀 때 그림자가 따라오지 않는 사고를 막기 위한 것이다.
*/
:root {

  /* ── 로고 컬러 ──────────────────────────────── */
  --logo-bg:           #0CB27E;  /* ★ 로고 배경 컬러 */
  --logo-dark:         #078A60;  /* ★ 호버용 */
  --logo-bg-rgb:       12, 178, 126; /* 알파 합성용 — --logo-bg 와 반드시 같이 바꿀 것 */

  /* ── 브랜드 컬러 ──────────────────────────────── */
  --primary:           #03c75a;  /* ★ 메인 브랜드 컬러 */
  --primary-dark:      #02a84a;  /* 호버용 */
  --primary-light:     #e6f9ee;  /* 연한 배경 강조 */
  --primary-rgb:       3, 199, 90;   /* 알파 합성용 — --primary 와 반드시 같이 바꿀 것 */

  /* ── 소셜 브랜드 컬러 (고정값. --primary 와 별개다) ── */
  --naver-green:       #03C75A;
  --naver-green-dark:  #02b351;
  --naver-green-rgb:   3, 199, 90;
  --kakao-yellow:      #FEE500;
  --kakao-yellow-dark: #F5DC00;
  --kakao-yellow-rgb:  254, 229, 0;

  /* ── 레이아웃 배경 ───────────────────────────── */
  --body-bg:           #f5f6f8;  /* ★ 전체 페이지 배경 */
  --card-bg:           #ffffff;  /* ★ 카드/위젯 배경 */
  --gnb-bg:            #2D3539;  /* ★ 상단 GNB 배경 */
  --sidebar-bg:        #414B5A;  /* ★ 좌측 사이드바 배경 */
  --sidebar-hover-bg:  #4f5b6d;  /* 사이드바 호버 */
  --sidebar-sub-bg:    rgba(0,0,0,0.15); /* 서브메뉴 배경 */

  /* ── 메인 컨텐츠 텍스트 ─────────────────────── */
  --text-main:         #303030;  /* ★ 주요 글자 (제목, 숫자) */
  --text-label:        #303030;  /* ★ 위젯 라벨 (취소요청, 반품요청 등) */
  --text-sub:          #6b7280;  /* 보조 글자 (공지, 플로우 라벨) */
  --text-muted:        #9ca3af;  /* 흐린 글자 (시간, 아이콘) */

  /* ── 어두운 배경(GNB/사이드바) 위 텍스트 ────── */
  --text-dark-hi:      #ffffff;               /* ★ 주요 글자 */
  --text-dark-sub:     rgba(255,255,255,0.85); /* 보조 글자 */
  --text-dark-muted:   rgba(255,255,255,0.45); /* 흐린 글자 */

  /* ── 상태 컬러 ───────────────────────────────── */
  --color-red:         #ff4b4b;  /* 취소/반품/지연 */
  --color-orange:      #ff8c00;  /* 경고/별점 */
  --color-blue:        #1a6dff;  /* 정보 */
  --color-teal:        #00b8a9;  /* 상품 */
  --color-indigo:      #4f46e5;  /* 리뷰 */

  /* ★ 경고 배경·테두리 — subscribe.css 에 두 번 리터럴로 박혀 있던 것을 뺐다.
     「확인 중인 결제」·「live 는 유료」 같은 **주의 배너**가 쓴다 (2026-09-05) */
  --warn-bg:           #fff8e6;  /* 경고 배경 */
  --warn-border:       #ffe0a3;  /* 경고 테두리 */

  /* ── 보더 ────────────────────────────────────── */
  --border-color:      #e5e7eb;            /* ★ 외곽 보더 */
  --border-inner:      #f3f4f6;            /* 카드 내부 구분선 */
  --border-row:        #f9fafb;            /* 행 구분선 */
  --sidebar-border:    rgba(255,255,255,0.08);
  --gnb-border:        rgba(0,0,0,0.20);

  /* ── 카드 ────────────────────────────────────── */
  --card-radius:       10px;
  --card-shadow:       0 1px 6px rgba(0,0,0,0.07);

  /* ── 폰트 ────────────────────────────────────── */
  --font-family: "Pretendard Variable","Malgun Gothic","맑은 고딕",
                 "Apple SD Gothic Neo",돋움,dotum,sans-serif; /* ★ */
  --font-style:  normal;  /* ★ */
  --font-weight: 600;     /* ★ */
  --font-size:   14px;    /* ★ */
  --line-height: 21px;    /* ★ */

  /* ── 레이아웃 수치 ───────────────────────────── */
  --gnb-height:    48px;
  --sidebar-width: 160px;
}