@charset "utf-8";

/* 토큰 정의 */
:root{
  /* 팔레트 토큰 (단순 정의) */
  /* [Brand] 메인 컬러 & 보조 컬러 */
  --color-primary-05: #e4eefa;
  --color-primary-10: #c9ddf6;
  --color-primary-20: #8fbbf0;
  --color-primary-30: #5299ed;
  --color-primary-40: #1176ef;
  --color-primary-50: #0758b9;  /* Base Color */
  --color-primary-60: #054694;
  --color-primary-70: #04356f;
  --color-primary-80: #03234a;
  --color-primary-90: #011225;
  --color-secondary-05: #ebf1f7;
  --color-secondary-10: #d7e2ef;
  --color-secondary-20: #aec5e0;
  --color-secondary-30: #83a8d3;
  --color-secondary-40: #558bc9;
  --color-secondary-50: #346fb2;
  --color-secondary-60: #285990;
  --color-secondary-70: #1d426d;
  --color-secondary-80: #132c49;
  --color-secondary-90: #091625;
  /* [Grayscale] 무채색 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-01: #f5f5f5;
  --color-gray-02: #f2f2f2;
  --color-gray-03: #f0f0f0;
  --color-gray-04: #e0e0e0;
  --color-gray-05: #dddddd;
  --color-gray-06: #cccccc;
  --color-gray-07: #888888;
  --color-gray-08: #777777;
  --color-gray-09: #555555;
  --color-gray-10: #444444; 
  --color-gray-11: #111111;

  /* [System] 상태 컬러 */
  --color-blue-05: #eaf1fa;
  --color-blue-50: #1172e9;
  --color-blue-70: #0a448c;
  --color-red-05: #faece9;
  --color-red-50: #de3412;
  --color-red-70: #861f0a;
  --color-orange-05: #fbf2ec;
  --color-orange-50: #f47a26;
  --color-orange-70: #a24608;
  --color-green-05: #e7f5ea;
  --color-green-50: #228738;
  --color-green-70: #135221;
  --color-skyblue-05: #e9f3fb;
  --color-skyblue-50: #058bfc;
  --color-skyblue-70: #025498;
  --color-yellow-05: #fcf6ea;
  --color-yellow-50: #fead09;
  --color-yellow-70: #9d6901;
  --color-purple-05: #f3edfa;
  --color-purple-50: #7e33e7;
  --color-purple-70: #491198;

  /* [Space] 여백 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-hero: 80px;

  /* [Layout] 레이아웃 */
  --width-wrap: 1400px;  /* 중앙 정렬 컨테이너 폭 */
  --width-left: 270px;  /* 서브페이지 왼쪽 메뉴 폭 */

  /* [Font Size] */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;    /* 기본 본문 크기 */
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-title: 32px;
  --font-hero: 48px;

  /* [Font Weight] */
  --weight-normal: 400;
  --weight-bold: 600;
  --weight-black: 800;

  /* [Radius] 곡률 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-base: 16px;   /* 카드 형식 라운드 */
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-round: 32px;
  --radius-full: 100%;

  /* [Shadow] 그림자 */
  --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);

  /* [Z-index] */
  --z-index-base: 1;
  --z-index-header: 100;
  --z-index-gnb: 200;
  --z-index-layer: 500;   /* 검색 레이어 등 */
  --z-index-modal: 1000;  /* 팝업 창 */
  --z-index-skip: 2000;   /* 스킵 메뉴 (항상 최상단) */

  /* [Letter Spacing] 자간 토큰 */
  --ls-ko: -0.025em;   /* 기본값 */
  --ls-en: 0.05em;     /* 영문 */
  
  /* [Letter-spacing] 자간 */
  --s-ls-tight: -0.025em; /* 포토샵 -25 */
  --s-ls-base: 0em;       /* 포토샵 0 */
  --s-ls-wide: 0.05em;    /* 포토샵 50 */




  /* 시맨틱 토큰 (용도별 정의) */
  --btn-height: 50px; /* 버튼 높이 */
  --btn-min-widht: 100px; /* 버튼 최소넓이 */

  --input-radius: var(--radius-md); /* 입력박스 radius */

  /* 용도에 따른 그레이 컬러 */
  --ds-gray-00: #ffffff;
  --ds-gray-10: #f4f4f4; /* input readonly 배경 등 */
  --ds-gray-20: #ececec; /* 파일추가 배경 등 */
  --ds-gray-30: #d9d9d9; /* input, textarea 테두리 등 */
  --ds-gray-40: #cecece; /* bullet point 등 */
  --ds-gray-50: #a9a9a9; /* checkbox border 등 */
  --ds-gray-60: #868686; /* 삭제 버튼 등 */
  --ds-gray-70: #666666; /* placeholder 색상 등 */
  --ds-gray-80: #444444; 
  --ds-gray-90: #242424; /* 기본 텍스트, 블랙 버튼 등 */

  /* 상태에 따른 컬러 */
  --color-success: #25b347; /* 성공/완료 */
  --color-info: #1d8be0; /* 정보 알림 */
  --color-warning: #f2652c; /* 경고 */
  --color-error: #e21625; /* 오류&위험 */

  /* 좌우 여백 토큰 */
  --side-gap: 24px;
  --side-menu-gap: 40px;

  /* 텍스트 계층간 여백 */
  --space-titleA: 60px;
  --space-titleB: 56px;
  --space-titleC: 40px;
  --space-titleD: 32px;
  --space-titleA-gap: 100px;
  --space-titleB-gap: 88px;
  --space-titleC-gap: 64px;
  --space-titleD-gap: 56px;

  /* 불릿 곡률 */
  --bullet-dot-radius: var(--radius-full);

  /* input, select, textarea 곡률 */
  --form-radius: 6px;

  /* 접근성 관련 포커스 설정 */
  --wa-focus-color: #0b153a;
  --wa-focus-width: 2px;
  --wa-focus-radius: 4px;
  --wa-focus-offset: -1px;

  /* 기본 폰트 컬러 */
  --font-color-default: var(--color-gray-11);
  
  /* gnb 활성화 컬러 */
  --gnb-point-color: #0758b9;
  --header-top-height: 0px;
  --header-btm-height: 88px;
  --header-height: var(--header-top-height) + var(--header-btm-height);

  /* 최대넓이 */
  --cts-wrap-width: 1808px;

  /* 스크롤 넓이 js 자동 계산 */
  --scrollbar-width: 0px;

  /* 게시판 테이블 색상 */
  --board-point-color: var(--color-primary-50);
  --board-bg-color: #e4eefa;
  --board-line-color: #ddd;

}


/* --------------------------------------------반응형-------------------------------------------- */

@media(min-width:1921px){ /* 와이드 모니터 고려 3840x1600 */
  :root{
    --side-gap: 40px;
    --side-menu-gap: 0;
  }
}

@media screen and (max-width:1400px){ /* 태블릿시작 */

}


@media screen and (max-width:1040px){

}

@media screen and (max-width:767px){
  :root{
    --header-btm-height: 72px;
    --side-gap: 16px;
  }

}

@media screen and (max-width:600px){

}

@media screen and (max-width:480px){

}

@media screen and (max-width:359px){

}