/* style.css */
:root {
  /* 1. 폰트 및 전역 CSS 변수(재할당 금지) 설정 */

  /******************************************
  1-1. 폰트
  -- Nata Sans 폰트 설정 ------------------

  font-family: "Nata Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight : 100-900>;
  font-style: normal;
  ******************************************/
  --main-font: "Nata Sans", sans-serif;

  font-family: var(--main-font);
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;


  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*****************************************/
  /* 폰트 굵기 설정 */
  --font-regular: 400;
  --font-bold: 700;

  /* 폰트 크기 설정 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-bold);
  }

  strong {
    font-weight: var(--font-bold);
  }


  /******************************************
  1-2. 전역 CSS 변수 정의
  - 색상
  ******************************************/
  --nexa-800: #232323;
  --nexa-600: #707070;
  --nexa-400: #9C9C9C;
  --nexa-200: #e9e9e9;
  --nexa-100: #fafafa;
  --nexa-blue: #0068FF;
  --nexa-white: #fff;


  /******************************************
  1-3. 반응형 너비 breakpoint
  - pc : 1560px~
  - desktop : 1440px ~ 1559px
  - tablet(tab) : 840px ~ 1439px
  - mobile : ~839px
  ******************************************/
  --maxW-desktop: 1559px;
  --maxW-tab: 1439px;
  --maxW-mobile: 839px;


  /******************************************
  1-4. swiper 슬라이드 관련 변수
  --slide count : 슬라이드 총 갯수
  ******************************************/
  --silde-count: 7;

}

/******************************************
2. 반응형마다 다르게 설정할 변수(재할당 가능) 설정
- responsive.css 맨 상단에 변수 재할당하기
******************************************/
/* 2-1. :root */
:root {
  /* 컨텐츠 너비 설정 */
  --con-width: 1200px;
  --con-width-max: 1560px;

  /* section.container margin 값 */
  --container-margin: 150px 0;

  /* section.container article.lang-area 자식 article 사이 간격 */
  --lang-area-row-gap: 350px;

  /* .title-box margin-bottom 값 */
  --title-box-mb-base: 60px;
  --title-box-mb-lg: 80px; /* article.road-map .title-box */
  --title-box-mb-xl: 100px; /* article.vision .title-box */
  --title-box-mb-about: 60px; /* article.about .title-box */

  /* .title-box h2~h4 margin-bottom 값 */
  --title-h-mb-sm: 24px;
  --title-h-mb-base: 28px;

  /* .structure .content-wrap의 col-gap 값 담을 변수 */
  --col-gap: 13.33px;


}

/* 2-2. 폰트 설정 및 margin-bottom */
html, body {
  /* 기본 폰트 사이즈 및 색상 설정 */
  font-size: var(--font-size-2xl);
  color: var(--nexa-800);
}

h2 {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--title-h-mb-base);
}

h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--title-h-mb-sm);
}



/*******************************************/
/* 3. 기본 스타일 */

/******************************************
3-1.유틸리티 클래스 적용
- .clear
- inner
******************************************/
.clear::after {
  content: "";
  display: block;
  clear: both;
}

.inner {
  /* 컨텐츠 너비 */
  width: 100%;
  max-width: var(--con-width);
}

/******************************************
3-2. 타이틀 영역 디자인 고정
- article > .title-box : margin-bottom
- article > .title-box p : font-size
******************************************/
article.vision>.title-box,
article.structure>.title-box {
  margin-bottom: var(--title-box-mb-xl);
}

article.legal>.title-box,
article.token>.title-box {
  margin-bottom: var(--title-box-mb-base); /* 60px */
}

article.about .txt-wrap>.title-box {
  margin-bottom: var(--title-box-mb-about); /* 100px */
}

article.road-map > .title-box {
  margin-bottom: var(--title-box-mb-lg); /* 80px */
}