/* style.css */
@charset "utf-8";

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

  /******************************************
  1-1. 폰트
  -- Noto Sans 폰트 설정 ------------------
  1. Noto Sans Japanese--------------------
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;  
  2. Noto Sans-----------------------------
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  3. Noto Sans Korean----------------------
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  ******************************************/
  /* 고정 **********************************/
  --noto-sans-jp: "Noto Sans JP", sans-serif;
  --noto-sans-en: "Noto Sans", sans-serif;
  --noto-sans-ko: "Noto Sans KR", sans-serif;
  --font-weight-nomoral-jp: 300;
  --font-weight-nomoral-en: 400;
  --font-weight-nomoral-ko: 400;
  --font-weight-bold: 700;

  /* 가변 **********************************/

  /* 폰트 굵기 설정 */
  --font-regular: var(--font-weight-nomoral-jp);
  --font-bold: var(--font-weight-bold);

  /* 폰트패밀리 */
  --main-font: var(--noto-sans-jp);

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

  /* 폰트 크기 설정 */
  --desktop-size-h2: 72px;
  --desktop-line-height-h2: 96px;
  --desktop-size-h3: 48px;
  --desktop-line-height-h3: 64px;
  --desktop-size-h4: 36px;
  --desktop-line-height-h4: 48px;
  --desktop-size-p_large: 24px;
  --desktop-line-height-p_large: 28px;
  --desktop-size-p_large_700: 26px;
  --desktop-line-height-p_large_700: 28px;
  --desktop-size-p_standard: 20px;
  --desktop-line-height-p_standard: 26px;
  --desktop-size-p_standard_700: 20px;
  --desktop-line-height-p_standard_700: 24px;
  --desktop-size-p_small: 18px;
  --desktop-line-height-p_small: 22px;
  --desktop-size-p_small_700: 18px;
  --desktop-line-height-p_small_700: 22px;

  --tablet-size-h2: 50px;
  --tablet-line-height-h2: 64px;
  --tablet-size-h3: 32px;
  --tablet-line-height-h3: 42px;
  --tablet-size-h4: 24px;
  --tablet-line-height-h4: 28px;
  --tablet-size-p_large: 20px;
  --tablet-line-height-p_large: 24px;
  --tablet-size-p_large_700: 20px;
  --tablet-line-height-p_large_700: 24px;
  --tablet-size-p_standard: 18px;
  --tablet-line-height-p_standard: 22px;
  --tablet-size-p_standard_700: 18px;
  --tablet-line-height-p_standard_700: 22px;
  --tablet-size-p_small: 16px;
  --tablet-line-height-p_small: 20px;
  --tablet-size-p_small_700: 16px;
  --tablet-line-height-p_small_700: 20px;

  --mobile-size-h2: 30px;
  --mobile-line-height-h2: 38px;
  --mobile-size-h3: 24px;
  --mobile-line-height-h3: 28px;
  --mobile-size-h4: 20px;
  --mobile-line-height-h4: 24px;
  --mobile-size-p_large: 18px;
  --mobile-line-height-p_large: 22px;
  --mobile-size-p_large_700: 18px;
  --mobile-line-height-p_large_700: 22px;
  --mobile-size-p_standard: 16px;
  --mobile-line-height-p_standard: 20px;
  --mobile-size-p_standard_700: 16px;
  --mobile-line-height-p_standard_700: 20px;
  --mobile-size-p_small: 14px;
  --mobile-line-height-p_small: 18px;
  --mobile-size-p_small_700: 14px;
  --mobile-line-height-p_small_700: 18px;


  /******************************************
  1-2. 전역 CSS 변수 정의
  - 색상
  ******************************************/
  --main-heavy-01: #538BB5;
  --main-heavy-03: #1E4E84;
  --main-light-02: #12C4DC;
  --grey-light-01: #EEEEEE;
  --grey-light-02: #E0E0E0;
  --grey-light-03: #BDBDBD;
  --grey-medium: #828282;
  --grey-heavy-02: #333;

  --black: #000;
  --white: #fff;

  /* 배경 원형 그라디언트 */
  --gradient-blue-radial-01: radial-gradient(50% 50% at 50% 50%, #689DBF 0%, #538BB5 100%);


  /******************************************
  1-3. 반응형 너비 breakpoint
  - desktop : 1280px~
  - tablet : 800px ~ 1279px
  - mobile : ~799px
  ******************************************/
  --maxW-tablet: 1279px;
  --maxW-mobile: 799px;

  /******************************************
  1-4. 컨텐츠 너비
  ******************************************/

  --desktop-width: 100%;
  --desktop-max-width: 1340px;
  --desktop-padding: 0 26px;

  --tablet-width: 100%;
  --tablet-max-width: 100%;
  --tablet-padding: 0 20px;

  --mobile-width: 100%;
  --mobile-max-width: 100%;
  --mobile-padding: 0 16px;



}

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

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

/******************************************
2. 반응형마다 다르게 설정할 변수(재할당 가능) 설정
- responsive.css 맨 상단에 변수 재할당하기
******************************************/
/* 2-1. :root */
:root {

  /* 글자 기본 크기 */
  html,
  body {
    font-size: var(--desktop-size-p_standard);
  }

  /* 타이틀 */
  h2 {
    font-size: var(--desktop-size-h2);
    line-height: var(--desktop-line-height-h2);
  }

  h3 {
    font-size: var(--desktop-size-h3);
    line-height: var(--desktop-line-height-h3);
  }

  h4 {
    font-size: var(--desktop-size-h4);
    line-height: var(--desktop-line-height-h4);
  }

  /* 텍스트 */
  p.large {
    font-size: var(--desktop-size-p_large);
    line-height: var(--desktop-line-height-p_large);
  }

  p.large.bold {
    font-size: var(--desktop-size-p_large_700);
    line-height: var(--desktop-line-height-p_large_700);
    font-weight: var(--font-weight-bold);
  }

  p,
  li {
    font-size: var(--desktop-size-p_standard);
    line-height: var(--desktop-line-height-p_standard);
  }

  p.small {
    font-size: var(--desktop-size-p_small);
    line-height: var(--desktop-line-height-p_small);
  }

  p.small.bold {
    font-size: var(--desktop-size-p_small_700);
    line-height: var(--desktop-line-height-p_small_700);
    font-weight: var(--font-weight-bold);
  }

  html,
  body,
  button,
  a {
    color: var(--grey-heavy-02);
    font-size: var(--font-regular);
  }

  /* 컨텐츠 너비 */
  .inner {
    width: var(--desktop-width);
    max-width: var(--desktop-max-width);
    padding: var(--desktop-padding);
  }

  i {
    width: 24px;
    height: 24px;
  }

  svg.icon {
    width: 100%;
    height: 100%;
    fill: none;
    color: var(--grey-heavy-02);
  }

}

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

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