@charset "UTF-8";
/*-------------------------------------------------
title : design tokens (CSS custom properties)
desc  : Figma(대구 화면설계) + ENERUSE / 대구 산단 토큰.
        index.html에서 다른 CSS보다 먼저 로드한다.
-------------------------------------------------*/
:root {
  /* brand core (Figma header / style guide) */
  --color-main: #050C42;
  --color-point: #999EFF;
  --color-point2: #7e83ed; /* 여수 녹색(#18766B) → Figma 포인트 보라 */
  --color-up: #fe3c4e;   /* 증가(▲): 그리드·표 증감 표시(con_com.css .up-down-count.up)와 같은 값 */
  --color-down: #309bfa; /* 감소(▼): 그리드·표 증감 표시(con_com.css .up-down-count.down)와 같은 값 */
  --color-point-hover: #4C54FF;
  --color-gnb-active: #999EFF;
  --color-nav-sub: #FFFFFF; /* 네이비 위 보조 글자: 메가메뉴 3단, 제목 배너 부제 */
  --color-util-bg: #4B4C59;
  --color-alarm-dot: #E481FF;
  --header-height: 4.4rem; /* Figma 88px */
  --header-padding-x: 2.5rem; /* Figma 50px */
  --logo-width: 7.5rem; /* Figma 150px — 메가메뉴 depth-tit 과 동일 */
  --gnb-pad-x: 2rem; /* .gnb 좌우 패딩 — 서브메뉴 시작선을 대메뉴 영역에 맞춤 */
  --util-btn-size: 2.4rem; /* Figma 48px */
  --util-btn-radius: 0.5rem; /* Figma 10px (html font-size 20px 기준) */
  --gnb-mega-min-height: 14rem; /* 메가메뉴 패널 최소 높이(콘텐츠가 더 크면 자동 확장) */

  /* primary / secondary scale */
  --color-primary-700: #050C42;
  --color-primary-100: #e8e9f5;

  /* brand accents (gradient stops, also used as solids) */
  --color-accent-cyan: #65A1D3;
  --color-accent-teal: #7E84ED;
  --color-accent-mint: #999EFF;
  --color-accent-aqua: #999EFF;
  --color-accent-sky: #65A1D3;

  /* gradients */
  --color-gradient-primary: linear-gradient(90deg, #7E84ED 0%, #65A1D3 100%);
  --color-gradient-secondary: linear-gradient(90deg, #7E84ED 0%, #999EFF 100%);
  --color-gradient-third: linear-gradient(90deg, #999EFF 0%, #65A1D3 100%);
  --color-gradient-admin: linear-gradient(136deg, rgb(54, 57, 62) 0%, rgb(44, 48, 57) 100%);

  --color-secondary-100: #F7F7FC;
  --color-secondary-200: #F3F3F8;
  --color-secondary-210: #E6E7F0;
  --color-secondary-220: #d6d7e7;
  --color-secondary-300: #B2B5CF;
  /* 참고: --color-secondary-500/600 은 정의하지 않는다.
     .list-* > li 배경, .bg-gray 등 여러 곳에서 의도치 않게 칠해지는
     레거시 참조라, 단일 색으로 정의하면 UI가 깨진다.
     원본처럼 미정의(transparent) 상태로 둔다. */
  --color-secondary-700: #7e83ed; /* 여수 녹색(#18766B) → Figma 포인트 보라. CSS 108곳이 참조 */
  --color-secondary-710: #4C54FF;

  /* dark / gray scale */
  --color-dark-900: #20262c;

  --color-gray-50: #fbfbfb;
  --color-gray-100: #ebebeb;
  --color-gray-150: #eee;
  --color-gray-200: #E1E1E1;
  --color-gray-250: #d8d8d8;
  --color-gray-300: #ccc;
  --color-gray-400: #adadad;
  --color-gray-500: #999;
  --color-gray-600: #777;
  --color-gray-700: #555;
  --color-gray-800: #333;
  --color-gray-900: #111;

  /* base */
  --color-white: #fff;
  --color-white-alpha-36: #ffffff5c;
  --color-white-alpha-21: #ffffff36;
  --color-black: #000;

  /* surfaces / backgrounds */
  --color-surface-100: #EFF2F4;

  /* scrollbar */
  --color-scroll-thumb: #d3cfcf;
  --color-admin-scroll-thumb: #b5bfdb;
  --color-admin-scroll-track: #434854;

  /* button semantics */
  --color-btn-primary: #4C54FF;
  --color-btn-success: #89b449;
  --color-btn-error: #ef3022;
  --color-btn-info: #65A1D3;
  --color-btn-secondary: #7c888d;
  --color-btn-warning: #f19327;

  /* overlays / dim */
  --color-overlay-10: rgba(0, 0, 0, 0.1);
  --color-overlay-30: rgba(0, 0, 0, 0.3);
  --color-overlay-70: rgba(0, 0, 0, 0.7);
  --color-dim: rgba(143, 143, 143, 0.53);

  /* radius */
  --radius-pill: 35px;

  /* semantic aliases (existing front SCSS compatibility) */
  --color-primary: var(--color-primary-700);
  --primary-color: var(--color-primary-700);
  --primary-darker-color: var(--color-point);
  --forth-color: var(--color-point2);
  --color-point-1-second: var(--color-point2);

  /* pagination semantics (Figma 공지사항 1132:4588: 선택 25px 원 #8183ed, 숫자 #a2a2a2) */
  --pagination-active-color: #fff;
  --pagination-active-bg: #8183ed;
  --pagination-active-border: #8183ed;
  --pagination-inactive-color: #a2a2a2;
  --pagination-hover-color: #8183ed;
  --pagination-nav-color: #a2a2a2;
  --pagination-disabled-opacity: 0.4;
  --pagination-btn-size: 1.25rem;
  --pagination-border-width: 1px;

  /* ===== Figma 대구 스타일가이드(338:11065) — DESIGN_FIGMA_SPEC.md §15 ===== */
  /* point */
  --fg-point: #7e83ed;
  --fg-point-alt: #8183ed;
  --fg-gradient: linear-gradient(90deg, #7d85ec 0%, #689fd6 100%);
  --fg-gradient-tab: linear-gradient(90deg, #7d85ec 0%, #679fd5 100%);

  /* surface / layout */
  --fg-card-border: #d0d5e5;
  --fg-card-radius: 0.5rem;          /* 10px */
  --fg-card-padding: 1rem;           /* 20px */
  --fg-filter-bg: #fafbfe;
  --fg-filter-padding: 0.75rem;      /* 15px */
  --fg-page-gap: 1.25rem;            /* 25px */
  --fg-page-pad-x: 2.5rem;           /* 50px */
  --fg-banner-radius: 1.25rem;       /* 25px */

  /* form controls */
  --fg-input-height: 2rem;           /* 40px */
  --fg-input-pad-x: 0.75rem;         /* 15px */
  --fg-input-radius: 0.25rem;        /* 5px */
  --fg-input-font: 0.75rem;          /* 15px */
  --fg-input-border: #ccc;
  --fg-input-border-date: #dcdcdc;
  --fg-input-border-focus: #7e83ed;
  --fg-input-text: #777;
  --fg-input-value: #333;
  --fg-input-placeholder: #a2a2a2;
  --fg-input-disabled-bg: #f3f3f3;
  --fg-input-disabled-text: #bdbdbd;
  --fg-error-border: #c26c65;
  --fg-error-text: #b12727;
  --fg-required: #ff0606;
  --fg-option-hover: #f4f3fd;
  --fg-icon-muted: #a2a2a2;
  --fg-check-off: #969696;
  --fg-check-disabled: #c0c0c0;
  --fg-cal-hover: #ebebeb;
  --fg-cal-other: #bdbdbd;

  /* buttons */
  --fg-btn-radius: 0.25rem;          /* 5px */
  --fg-btn-pad-x: 0.75rem;           /* 15px */
  --fg-btn-height: 2rem;             /* 40px */
  --fg-btn-height-sm: 1.5rem;        /* 30px */
  --fg-btn-white-text: #555;
  --fg-btn-gray: #777;
  --fg-btn-modify: #aaabb1;
  --fg-btn-navy: #60616b;
  --fg-btn-icon-bg: #eaeaea;
  --fg-btn-table-border: #dcdcdc;
  --fg-btn-table-radius: 1.15rem;    /* 23px */

  /* tabs */
  --fg-tab-text: #666;
  --fg-tab-active-text: #333;
  --fg-tab-underline: #7e84ed;
  --fg-tab-border: #ccc;

  /* table */
  --fg-th-bg: #eff0f8;
  --fg-th-line: #7e83ed;             /* 2px */
  --fg-th-text: #555;
  --fg-td-text: #777;
  --fg-td-title: #262626;
  --fg-row-line: #e1e1e1;
  --fg-info-text: #84878d;

  /* text */
  --fg-title: #262626;
  --fg-subtitle: #444;
  --fg-body: #333;

  /* modal */
  --fg-dim: rgba(0, 0, 0, 0.3);
  --fg-modal-radius: 0.5rem;         /* 10px */

  /* chart (A Graph 338:11851 순서) */
  --chart-1: #7956a8;
  --chart-2: #7877df;
  --chart-3: #adb1ff;
  --chart-4: #c4def9;
  --chart-5: #f29cb7;
  --chart-6: #deaaff;
  --chart-7: #fbd050;
  --chart-8: #faeadd;
  --chart-9: #3e2b6b;
  --chart-10: #232b36;
  --chart-11: #95d56d;
  --chart-12: #fe925e;
}