/* =========================================================================
 * variables.css  —  T-CMS 2.0 리디자인 색상 토큰
 * 색상 값은 이 파일에서만 정의합니다. app.css 는 var(--...) 로만 참조합니다.
 * 값 출처: Figma "T-CMS 2.0" 디자인 가이드 (Design Guide / T-CMS 2.0 프레임)
 * ========================================================================= */
:root {
	/* ── 7-ELEVEN 브랜드 ─────────────────────────── */
	--c-brand-green:      #00954c;
	--c-brand-orange:     #f47920;
	--c-brand-red:        #ee1c25;

	/* ── 사이드바 (Figma Sidebar 컴포넌트 #0D1D2C) ── */
	--c-sidebar-bg:       #0d1d2c;   /* 사이드바 배경 */
	--c-sidebar-bg-2:     #0d1d2c;   /* 로고 영역 (Figma: 본문과 동일 톤) */
	--c-sidebar-border:   #1a2c3e;
	--c-sidebar-text:     #a8b5c4;   /* 기본 메뉴 텍스트 (Figma #A8B5C4) */
	--c-sidebar-text-dim: #8b99a8;
	--c-sidebar-hover-bg: #16293b;
	--c-sidebar-active:   #ffffff;   /* 활성 메뉴 텍스트 */
	--c-sidebar-active-bg:#0e925b;   /* 활성 메뉴 배경 (Primary/Green) */
	--c-sidebar-sub-text: #a8b5c4;
	--c-sidebar-subactive-bg: #172e29; /* 활성 서브메뉴 배경 (Figma) */

	/* ── 서피스 / 레이아웃 ───────────────────────── */
	--c-app-bg:           #f4f6f8;   /* 콘텐츠 영역 배경 (Background) */
	--c-surface:          #ffffff;   /* 카드/패널 */
	--c-surface-2:        #f7f9fc;   /* 옅은 패널 */
	--c-border:           #e2e5e9;   /* Border */
	--c-border-strong:    #d0d6dd;
	--c-topbar-bg:        #ffffff;
	--c-topbar-border:    #e2e5e9;
	--c-shadow:           rgba(11, 34, 57, 0.06);
	--c-shadow-strong:    rgba(11, 34, 57, 0.10);

	/* ── 텍스트 ─────────────────────────────────── */
	--c-text:             #1f2937;   /* 기본 (Ink) */
	--c-text-strong:      #111827;   /* 제목 */
	--c-text-sub:         #6b7280;   /* 보조 (Sub Text) */
	--c-text-muted:       #9ca3af;   /* 흐린 */
	--c-text-invert:      #ffffff;

	/* ── 시맨틱(상태) ───────────────────────────── */
	--c-primary:          #0e925b;   /* 메인 포인트 (Primary/Green) */
	--c-primary-dark:     #0b7a4c;
	--c-primary-soft:     #e6f4ec;   /* Primary Soft */
	--c-green:            #16a34a;   /* Success */
	--c-green-soft:       #e6f4ec;
	--c-orange:           #cc6a17;   /* Warning */
	--c-orange-soft:      #faeee0;
	--c-blue:             #1a61d1;   /* Link */
	--c-blue-soft:        #e8f0fb;
	--c-red:              #dc3333;   /* Danger */
	--c-red-soft:         #fbe9e9;
	--c-yellow:           #eab308;
	--c-gray:             #98a2b3;

	/* ── 지역별 매체맵 ──────────────────────────── */
	--c-map-seoul:        #7cc7a2;   /* 서울 */
	--c-map-gyeonggi:     #f2a661;   /* 경기/인천 (Figma: 주황) */
	--c-map-gangwon:      #c3cbd6;   /* 강원/제주 */
	--c-map-chungcheong:  #a9c6ea;   /* 충청권 */
	--c-map-yeongnam:     #f0a6ab;   /* 영남권 */
	--c-map-honam:        #f2d08a;   /* 호남권 */
	--c-map-stroke:       #ffffff;

	/* ── 차트 계열(진행바 등) ───────────────────── */
	--c-series-total:     #16a34a;
	--c-series-ds:        #16a34a;
	--c-series-menu:      #cc6a17;
	--c-series-media:     #1a61d1;
	--c-series-banner:    #1a61d1;
	--c-track:            #eef1f6;   /* 진행바 트랙 */

	/* ── 지표 강조 ─────────────────────────────── */
	--c-metric-good:      #16a34a;
	--c-metric-warn:      #cc6a17;
	--c-metric-bad:       #dc3333;
	--c-metric-link:      #1a61d1;

	/* ── 공통 테이블 ───────────────────────────── */
	--c-table-head-bg:    #0b2239;   /* 헤더 네이비 (Navy/Header) */
	--c-table-head-text:  #ffffff;
	--c-table-head-sort:  #9fb0c0;   /* 정렬 화살표 */
	--c-table-row:        #ffffff;
	--c-table-row-alt:    #f7f8fa;   /* 스트라이프 */
	--c-table-row-hover:  #eef7f2;   /* 그린 틴트 hover */
	--c-table-border:     #e2e5e9;
	--c-status-on:        #16a34a;   /* 정상/ON */
	--c-status-off:       #dc3333;   /* 단절/정비필요 */
	--c-status-on-bg:     #e6f4ec;   /* 정상 가동 배지 배경(연초록) */
	--c-status-off-bg:    #fbe9e9;   /* 정비필요 배지 배경(연빨강) */
	/* 권역 색상 (TOBE 기준) : 서울=초록, 경기/인천=주황, 충청=파랑, 영남=빨강, 호남=노랑 */
	--c-region-seoul:     #16a34a;
	--c-region-gyeonggi:  #cc6a17;
	--c-region-chungcheong:#1a61d1;
	--c-region-yeongnam:  #dc3333;
	--c-region-honam:     #d9a520;
	--c-region-gangwon:   #6b7280;

	/* ── 치수 토큰 (Figma: radius 4px, 버튼/인풋 40px, 테이블 행 46–52px) ── */
	--sidebar-w:          170px;     /* Figma Sidebar 컴포넌트 너비 */
	--sidebar-w-collapsed: 64px;
	--topbar-h:           50px;      /* Figma 로고/상단바 높이 */
	--radius:             8px;       /* 카드/패널 */
	--radius-sm:          4px;       /* 버튼/인풋 (Figma 기준 4px) */
	--radius-lg:          12px;
}