@charset "UTF-8";
/*-------------------------------------------------
title : design tokens (CSS custom properties)
desc  : 프로젝트 전역 디자인 변수 단일 소스.
        index.html에서 다른 CSS보다 먼저 로드한다.
-------------------------------------------------*/
:root {
  /* primary / secondary scale */
  --color-primary-700: #00589D;
  --color-primary-100: #e3f5e2;

  /* brand accents (gradient stops, also used as solids) */
  --color-accent-cyan: #21D0B8;
  --color-accent-teal: #24AAB9;
  --color-accent-mint: #78F4D3;
  --color-accent-aqua: #91E7D1;
  --color-accent-sky: #7CBFEE;

  /* gradients */
  --color-gradient-primary: linear-gradient(90deg, var(--color-primary-700) 0%, var(--color-accent-cyan) 100%);
  --color-gradient-secondary: linear-gradient(90deg, var(--color-accent-teal) 0%, var(--color-accent-mint) 100%);
  --color-gradient-third: linear-gradient(90deg, var(--color-accent-aqua) 0%, var(--color-accent-sky) 100%);
  --color-gradient-admin: linear-gradient(136deg, rgb(54, 57, 62) 0%, rgb(44, 48, 57) 100%);

  --color-secondary-100: #F7FCFC;
  --color-secondary-200: #F3F8F7;
  --color-secondary-210: #E6F0EE;
  --color-secondary-220: #d6e7e4;
  --color-secondary-300: #B2CFC9;
  /* 참고: --color-secondary-500/600 은 정의하지 않는다.
     .list-* > li 배경, .bg-gray 등 여러 곳에서 의도치 않게 칠해지는
     레거시 참조라, 단일 색으로 정의하면 UI가 깨진다.
     원본처럼 미정의(transparent) 상태로 둔다. */
  --color-secondary-700: #18766B;
  --color-secondary-710: #107F93;

  /* 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: #3d67bd;
  --color-btn-success: #89b449;
  --color-btn-error: #ef3022;
  --color-btn-info: #2e8cb5;
  --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-secondary-700);
  --forth-color: var(--color-secondary-700);
  --color-point-1-second: var(--color-secondary-700);

  /* pagination semantics */
  --pagination-active-color: var(--color-secondary-700);
  --pagination-active-bg: var(--color-secondary-200);
  --pagination-active-border: var(--color-secondary-700);
  --pagination-inactive-color: var(--color-gray-700);
  --pagination-hover-color: var(--color-secondary-700);
  --pagination-nav-color: var(--color-secondary-700);
  --pagination-disabled-opacity: 0.4;
  --pagination-btn-size: 1.75rem;
  --pagination-border-width: 1px;
}