@charset "utf-8";

:root {

  /* //// 기본값 설정 부분, 홈페이지 스타일에 맞게 수치/색상 등 조절 //// */
  /* **** 폰트 **** */
  --typo-font-type: "Pretendard";
  --typo-font-weight-regular: Regular;
  --typo-font-weight-bold: Bold;
  --typo-letter-spacing-0: 0rem;
  --typo-letter-spacing-1: 1px;

  /* **** 고정 색상 **** */
  --white: #fff;
  --black: #000;
  --danger: #EB003B;
  --warning: #B9131E;
  --success: #008A1E;
  --information: #2768FF;
  --primary: #246BEB;
  --text-color: #1d1d1d;

  /* **** 수치 **** */
  --number-0: 0rem;
  --number-1: 0.0625rem;
  --number-2: 0.125rem;
  --number-3: 0.25rem;
  --number-4: 0.375rem;
  --number-5: 0.5rem;
  --number-6: 0.625rem;
  /*10px*/
  --number-7: 0.75rem;
  /*12px*/
  --number-8: 1rem;
  /*16px*/
  --number-9: 1.25rem;
  /*20px*/
  --number-10: 1.5rem;
  /*24px*/
  --number-11: 1.75rem;
  --number-12: 2rem;
  --number-13: 2.25rem;
  --number-14: 2.5rem;
  --number-15: 2.75rem;
  --number-16: 3rem;
  --number-17: 3.5rem;
  --number-18: 4rem;
  --number-19: 4.5rem;
  --number-20: 5rem;
  --number-21: 6rem;
  --number-max: 6.25rem;

  /* ** SEMANTIC ** */
  --gap-1: var(--number-2);
  --gap-2: var(--number-3);
  --gap-3: var(--number-5);
  --gap-4: var(--number-7);
  --gap-5: var(--number-8);
  --gap-6: var(--number-9);
  --gap-7: var(--number-10);
  --gap-8: var(--number-12);
  --gap-9: var(--number-14);
  --gap-10: var(--number-16);
  --gap-11: var(--number-18);
  --gap-12: var(--number-20);
  --padding-1: var(--number-2);
  --padding-2: var(--number-3);
  --padding-3: var(--number-5);
  --padding-4: var(--number-6);
  --padding-5: var(--number-7);
  --padding-6: var(--number-8);
  --padding-7: var(--number-9);
  --padding-8: var(--number-10);
  --padding-9: var(--number-12);
  --padding-10: var(--number-14);
  --size-height-1: var(--number-5);
  --size-height-2: var(--number-8);
  --size-height-3: var(--number-9);
  --size-height-4: var(--number-10);
  --size-height-5: var(--number-12);
  --size-height-6: var(--number-14);
  --size-height-7: var(--number-16);
  --size-height-8: var(--number-17);
  --size-height-9: var(--number-18);
  --size-height-10: var(--number-19);
  --size-height-11: var(--number-20);
  --radius-xsmall1: var(--number-2);
  --radius-xsmall2: var(--number-2);
  --radius-xsmall3: var(--number-2);
  --radius-small1: var(--number-3);
  --radius-small2: var(--number-3);
  --radius-small3: var(--number-3);
  --radius-medium1: var(--number-4);
  --radius-medium2: var(--number-4);
  --radius-medium3: var(--number-5);
  --radius-medium4: var(--number-5);
  --radius-large1: var(--number-6);
  --radius-large2: var(--number-6);
  --radius-xlarge1: var(--number-7);
  --radius-xlarge2: var(--number-7);
  --radius-max: var(--number-max);

  --width-variable-regular: 0.0625rem;
  --width-variable-medium: 0.125rem;
  --width-static-regular: 0.0625rem;
  --width-static-medium: 0.125rem;

  /* ** RESPONSIVE-PC ** */
  /* 수정값 (base 16px) */
  --pc-fs-display-large: 3.75rem;
  --pc-fs-display-medium: 2.75rem;
  --pc-fs-display-small: 2.25rem;
  --pc-fs-body-large: 1.1875rem;
  --pc-fs-body-medium: 1.0625rem;
  --pc-fs-body-small: 0.9375rem;
  --pc-fs-body-xsmall: 0.8125rem;
  --pc-fs-label-large: 1.1875rem;
  --pc-fs-label-medium: 1.0625rem;
  --pc-fs-label-small: 0.9375rem;
  --pc-fs-label-xsmall: 0.8125rem;
  --pc-fs-heading-large: 2rem;
  --pc-fs-heading-medium: 1.5rem;
  --pc-fs-heading-small: 1.1875rem;
  --pc-fs-heading-xsmall: 1.0625rem;
  --pc-fs-heading-xxsmall: 0.9375rem;
  --pc-fs-heading-xlarge: 2.5rem;
  --pc-fs-navigation-title-medium: 1.5rem;
  --pc-fs-navigation-title-small: 1.1875rem;
  --pc-fs-navigation-depth-medium-bold: 1.0625rem;
  --pc-fs-navigation-depth-medium: 1.0625rem;
  --pc-fs-navigation-depth-small-bold: 0.8125rem;
  --pc-fs-navigation-depth-small: 0.8125rem;

  --pc-gap-header-breadcrumb: var(--number-10);
  --pc-gap-left-contents: var(--number-18);
  --pc-gap-contents-right: var(--number-14);
  --pc-gap-h1-h2: var(--number-16);
  --pc-gap-h2-h2: var(--number-20);
  --pc-gap-h2-h3: var(--number-14);
  --pc-gap-h3-h3: var(--number-18);
  --pc-gap-h3-h4: var(--number-10);
  --pc-gap-h4-h4: var(--number-14);
  --pc-gap-h4-h5: var(--number-8);
  --pc-gap-h5-h5: var(--number-12);
  --pc-gap-title-body-small: var(--number-8);
  --pc-gap-title-body-medium: var(--number-9);
  --pc-gap-title-body-large: var(--number-10);
  --pc-gap-breadcrumb-h1: var(--number-14);
  --pc-gap-contents-footer: var(--number-18);
  --pc-gap-text-text-large: var(--number-9);
  --pc-gap-text-text-medium: var(--number-8);
  --pc-gap-text-text-small: var(--number-7);
  --pc-gap-image-text-small: var(--number-9);
  --pc-gap-image-text-medium: var(--number-10);
  --pc-gap-image-text-large: var(--number-12);
  --pc-padding-card-large: var(--number-14);
  --pc-padding-card-medium: var(--number-12);
  --pc-padding-card-small: var(--number-10);
  --pc-padding-card-xsmall: var(--number-8);

  /* ** RESPONSIVE-MOBILE ** */
  /* 수정값 (base 16px) */
  --mobile-fs-display-large: 2.75rem;
  --mobile-fs-display-medium: 2rem;
  --mobile-fs-display-small: 1.75rem;
  --mobile-fs-body-large: 1.1875rem;
  --mobile-fs-body-medium: 1.0625rem;
  --mobile-fs-body-small: 0.9375rem;
  --mobile-fs-body-xsmall: 0.8125rem;
  --mobile-fs-label-large: 1.1875rem;
  --mobile-fs-label-medium: 1.0625rem;
  --mobile-fs-label-small: 0.9375rem;
  --mobile-fs-label-xsmall: 0.8125rem;
  --mobile-fs-heading-large: 1.5rem;
  --mobile-fs-heading-medium: 1.375rem;
  --mobile-fs-heading-small: 1.1875rem;
  --mobile-fs-heading-xsmall: 1.0625rem;
  --mobile-fs-heading-xxsmall: 0.9375rem;
  --mobile-fs-heading-xlarge: 1.75rem;
  --mobile-fs-navigation-title-medium: 1.375rem;
  --mobile-fs-navigation-title-small: 1.1875rem;
  --mobile-fs-navigation-depth-medium-bold: 1.0625rem;
  --mobile-fs-navigation-depth-medium: 1.0625rem;
  --mobile-fs-navigation-depth-small-bold: 0.8125rem;
  --mobile-fs-navigation-depth-small: 0.8125rem;

  --mobile-gap-header-breadcrumb: var(--number-8);
  --mobile-gap-left-contents: 0rem;
  --mobile-gap-contents-right: 0rem;
  --mobile-gap-h1-h2: var(--number-12);
  --mobile-gap-h2-h2: var(--number-14);
  --mobile-gap-h2-h3: var(--number-10);
  --mobile-gap-h3-h3: var(--number-12);
  --mobile-gap-h3-h4: var(--number-8);
  --mobile-gap-h4-h4: var(--number-10);
  --mobile-gap-h4-h5: var(--number-7);
  --mobile-gap-h5-h5: var(--number-8);
  --mobile-gap-title-body-small: var(--number-5);
  --mobile-gap-title-body-medium: var(--number-7);
  --mobile-gap-title-body-large: var(--number-9);
  --mobile-gap-breadcrumb-h1: var(--number-12);
  --mobile-gap-contents-footer: var(--number-14);
  --mobile-gap-text-text-large: var(--number-8);
  --mobile-gap-text-text-medium: var(--number-7);
  --mobile-gap-text-text-small: var(--number-6);
  --mobile-gap-image-text-small: var(--number-8);
  --mobile-gap-image-text-medium: var(--number-9);
  --mobile-gap-image-text-large: var(--number-10);
  --mobile-padding-card-large: var(--number-10);
  --mobile-padding-card-medium: var(--number-10);
  --mobile-padding-card-small: var(--number-9);
  --mobile-padding-card-xsmall: var(--number-7);


  /* **** 색상 **** */
  --primary-5: #ecf2fe;
  --primary-10: #d8e5fd;
  --primary-20: #b1cefb;
  --primary-30: #86aff9;
  --primary-40: #4c87f6;
  --primary-50: #246BEB;
  --primary-60: #0b50d0;
  --primary-70: #083891;
  --primary-80: #052561;
  --primary-90: #03163a;
  --primary-95: #020f27;
  --secondary-5: #eef2f7;
  --secondary-10: #d6e0eb;
  --secondary-20: #bacbde;
  --secondary-30: #90b0d5;
  --secondary-40: #6b96c7;
  --secondary-50: #346fb2;
  --secondary-60: #1c589c;
  --secondary-70: #063a74;
  --secondary-80: #052b57;
  --secondary-90: #031f3f;
  --secondary-95: #02162c;
  --gray-0: #ffffff;
  --gray-5: #f4f5f6;
  --gray-10: #e6e8ea;
  --gray-20: #cdd1d5;
  --gray-30: #b1b8be;
  --gray-40: #8a949e;
  --gray-50: #6d7882;
  --gray-60: #58616a;
  --gray-70: #464c53;
  --gray-80: #33363d;
  --gray-90: #1e2124;
  --gray-95: #131416;
  --gray-100: #000000;
  --danger-5: #fdefec;
  --danger-10: #fcdfd9;
  --danger-20: #f7afa1;
  --danger-30: #f48771;
  --danger-40: #f05f42;
  --danger-50: #de3412;
  --danger-60: #bd2c0f;
  --danger-70: #8a240f;
  --danger-80: #5c180a;
  --danger-90: #390d05;
  --danger-95: #260903;
  --information-5: #e7f4fe;
  --information-10: #d3ebfd;
  --information-20: #9ed2fa;
  --information-30: #5fb5f7;
  --information-40: #2098f3;
  --information-50: #0b78cb;
  --information-60: #096ab3;
  --information-70: #085691;
  --information-80: #053961;
  --information-90: #03253f;
  --information-95: #021a2c;
  --warning-5: #fff3db;
  --warning-10: #ffe0a3;
  --warning-20: #ffc95c;
  --warning-30: #ffb114;
  --warning-40: #c78500;
  --warning-50: #9e6a00;
  --warning-60: #8a5c00;
  --warning-70: #614100;
  --warning-80: #422c00;
  --warning-90: #2e1f00;
  --warning-95: #241800;
  --success-5: #eaf6ec;
  --success-10: #d8eedd;
  --success-20: #a9dab4;
  --success-30: #7ec88e;
  --success-40: #3fa654;
  --success-50: #228738;
  --success-60: #267337;
  --success-70: #285d33;
  --success-80: #1f4727;
  --success-90: #122b18;
  --success-95: #0e2012;
  --point-5: #fbeff0;
  --point-10: #f5d6d9;
  --point-20: #ebadb2;
  --point-30: #e0858c;
  --point-40: #d65c66;
  --point-50: #d63d4a;
  --point-60: #ab2b36;
  --point-70: #7a1f26;
  --point-80: #521419;
  --point-90: #310c0f;
  --point-95: #21080a;
  --graphic-10: #e5ecf9;
  --graphic-30: #98acc5;
  --graphic-50: #61758f;
  --graphic-70: #39506c;
  --graphic-90: #223a58;
  --alpha-black100: #000000;
  --alpha-black75: #000000bf;
  --alpha-black50: #00000080;
  --alpha-black25: #00000040;
  --alpha-black10: #0000001a;
  --alpha-black0: #00000000;
  --alpha-white100: #ffffff;
  --alpha-white75: #ffffffbf;
  --alpha-white50: #ffffff80;
  --alpha-white25: #ffffff40;
  --alpha-white10: #ffffff1a;
  --alpha-white0: #ffffff00;

  /* ** MODE-LIGHT ** */
  --surface-gray-subtler: var(--gray-5);
  --surface-gray-subtle: var(--gray-10);
  --surface-disabled: var(--gray-20);
  --surface-primary-subtler: var(--primary-5);
  --surface-secondary-subtler: var(--secondary-5);
  --surface-danger-subtler: var(--danger-5);
  --surface-warning-subtler: var(--warning-5);
  --surface-success-subtler: var(--success-5);
  --surface-information-subtler: var(--information-5);
  --surface-point-subtler: var(--point-5);
  --surface-white: var(--gray-0);
  --surface-inverse: var(--gray-90);
  --surface-white-static: var(--gray-0);
  --surface-inverse-static: var(--gray-90);
  --surface-white-subtle: var(--gray-0);
  --surface-white-subtler: var(--gray-0);
  --border-gray-light: var(--gray-20);
  --border-gray: var(--gray-30);
  --border-secondary-light: var(--secondary-10);
  --border-danger-light: var(--danger-10);
  --border-danger: var(--danger-50);
  --border-warning-light: var(--warning-10);
  --border-warning: var(--warning-50);
  --border-success-light: var(--success-10);
  --border-success: var(--success-50);
  --border-information-light: var(--information-10);
  --border-information: var(--information-50);
  --border-gray-dark: var(--gray-60);
  --border-primary: var(--primary-50);
  --border-disabled: var(--gray-30);
  --border-gray-darker: var(--gray-90);
  --border-secondary: var(--secondary-70);
  --border-inverse: var(--gray-0);
  --border-transparency: var(--alpha-black0);
  --border-primary-light: var(--primary-10);
  --border-point: var(--point-50);
  --border-point-light: var(--point-10);
  --divider-gray-light: var(--gray-20);
  --divider-gray: var(--gray-40);
  --divider-gray-dark: var(--gray-50);
  --divider-primary: var(--primary-50);
  --divider-secondary-light: var(--secondary-10);
  --divider-secondary: var(--secondary-70);
  --divider-error: var(--danger-50);
  --divider-primary-light: var(--primary-10);
  --divider-inverse: var(--gray-0);
  --divider-gray-darker: var(--gray-90);
  --divider-point: var(--point-50);
  --text-bolder: var(--gray-95);
  --text-subtle: var(--gray-70);
  --text-disabled: var(--gray-40);
  --text-disabled-on: var(--gray-50);
  --text-primary: var(--primary-60);
  --text-secondary: var(--secondary-80);
  --text-danger: var(--danger-60);
  --text-warning: var(--warning-60);
  --text-success: var(--success-60);
  --text-information: var(--information-60);
  --text-basic: var(--text-color);
  --text-point: var(--point-60);
  --text-bolder-inverse: var(--gray-0);
  --text-basic-inverse: var(--gray-0);
  --text-subtle-inverse: var(--gray-30);
  --text-inverse-static: var(--gray-0);
  --text-static: var(--gray-90);
  --icon-gray: var(--gray-80);
  --icon-gray-fill: var(--gray-20);
  --icon-inverse: var(--gray-0);
  --icon-primary: var(--primary-50);
  --icon-secondary: var(--secondary-80);
  --icon-point: var(--point-50);
  --icon-danger: var(--danger-50);
  --icon-warning: var(--warning-50);
  --icon-success: var(--success-50);
  --icon-information: var(--information-50);
  --icon-gray-light: var(--gray-70);
  --icon-disabled: var(--gray-40);
  --icon-disabled-on: var(--gray-50);
  --icon-inverse-static: var(--gray-0);
  --icon-primary-static: var(--primary-50);
  --icon-secondary-static: var(--secondary-80);
  --icon-point-static: var(--point-50);
  --icon-danger-static: var(--danger-50);
  --icon-warning-static: var(--warning-50);
  --icon-success-static: var(--success-50);
  --icon-information-static: var(--information-50);
  --icon-gray-static: var(--gray-80);
  --link-default: var(--primary-50);
  --link-hover: var(--primary-60);
  --link-pressed: var(--primary-70);
  --link-visited: #5917b8;
  --button-primary-fill: var(--primary-50);
  --button-primary-fill-hover: var(--primary-60);
  --button-primary-fill-pressed: var(--primary-70);
  --button-secondary-fill: var(--primary-5);
  --button-secondary-fill-hover: var(--primary-10);
  --button-secondary-fill-pressed: var(--primary-20);
  --button-secondary-border: var(--primary-50);
  --button-tertiary-fill: var(--alpha-white0);
  --button-tertiary-fill-hover: var(--gray-5);
  --button-tertiary-fill-pressed: var(--gray-10);
  --button-tertiary-border: var(--gray-60);
  --button-disabled-fill: var(--gray-20);
  --button-text-fill-hover: var(--secondary-5);
  --button-text-fill-pressed: var(--secondary-10);
  --button-text-fill: var(--alpha-white0);
  --button-text-border: var(--alpha-black0);
  --button-disabled-border: var(--gray-30);
  --background-white: var(--gray-0);
  --background-inverse: var(--gray-90);
  --background-gray-subtler: var(--gray-5);
  --background-gray-subtle: var(--gray-10);
  --background-dim: var(--alpha-black75);
  --element-disabled-light: var(--gray-20);
  --element-disabled-dark: var(--gray-40);
  --element-gray-lighter: var(--gray-5);
  --element-gray-light: var(--gray-10);
  --element-gray: var(--gray-50);
  --element-primary-lighter: var(--primary-5);
  --element-primary-light: var(--primary-10);
  --element-primary: var(--primary-50);
  --element-secondary-lighter: var(--secondary-5);
  --element-secondary-light: var(--secondary-10);
  --element-secondary: var(--secondary-70);
  --element-point-lighter: var(--point-5);
  --element-point-light: var(--point-10);
  --element-point: var(--point-50);
  --element-danger-lighter: var(--danger-5);
  --element-danger: var(--danger-50);
  --element-warning-lighter: var(--warning-5);
  --element-warning: var(--warning-30);
  --element-success-lighter: var(--success-5);
  --element-success: var(--success-50);
  --element-information-lighter: var(--information-5);
  --element-information: var(--information-50);
  --element-inverse: var(--gray-0);
  --element-gray-dark: var(--gray-60);
  --element-inverse-static: var(--gray-0);
  --action-white: var(--gray-0);
  --action-primary: var(--alpha-white0);
  --action-primary-hover: var(--primary-5);
  --action-primary-pressed: var(--primary-10);
  --action-secondary: var(--alpha-white0);
  --action-secondary-hover: var(--secondary-5);
  --action-secondary-pressed: var(--secondary-10);
  --action-secondary-selected: var(--secondary-5);
  --action-secondary-on: var(--alpha-white0);
  --action-secondary-on-hover: var(--gray-0);
  --action-secondary-on-pressed: var(--secondary-10);
  --action-secondary-on-selected: var(--gray-0);
  --action-secondary-active: var(--secondary-70);
  --action-primary-active: var(--primary-50);
  --action-disabled: var(--gray-20);
  --action-primary-selected: var(--primary-5);
  --input-border: var(--gray-60);
  --input-border-disabled: var(--gray-30);
  --input-border-active: var(--primary-50);
  --input-border-error: var(--danger-50);
  --input-surface: var(--gray-0);
  --input-surface-disabled: var(--gray-20);

  --alpha-base100: var(--alpha-white100);
  --alpha-base50: var(--alpha-white50);
  --alpha-base25: var(--contrast-alpha-white25);
  --alpha-base0: var(--alpha-white0);
  --alpha-inverse100: var(--alpha-black100);
  --alpha-inverse50: var(--alpha-black50);
  --alpha-inverse25: var(--alpha-black25);
  --alpha-inverse0: var(--alpha-black0);
  --alpha-base75: var(--alpha-white75);
  --alpha-inverse75: var(--alpha-black75);
  --alpha-inverse10: var(--alpha-black10);
  --alpha-base10: var(--contrast-alpha-white10);
  --alpha-shadow1: #0000000d;
  --alpha-shadow2: #00000014;
  --alpha-shadow3: #0000001f;





}