@import url(../fonts/Poppins/Poppins.css);
@import url(../fonts/SUIT/SUIT.css);
@import url(../fonts/Pretendard/Pretendard.css);

:root {
  --HC_Red_01: #f9423a;
  --HC_Red_02: #7c2629;
  --HC_Red_03: #ff6c6c;
  --HC_Red_04: #ff9f9f;
  --HC_Red_05: #ffdede;
  --HC_Red_06: #fff2f2;
  --HC_Red_07: #fff7f7;
  --HC_Red_08: #ff453d;
  --HC_Red_Sub_01: #c70800;
  --HC_Red_Main_01: #F95939;

  --HC_Blue_01: #1c35da;
  --HC_Blue_02: #171f7a;
  --HC_Blue_03: #3a59ef;
  --HC_Blue_04: #8da8fc;
  --HC_Blue_05: #d7e2ff;
  --HC_Blue_06: #e6edff;

  --HC_Green_01: #08cc63;
  --HC_Green_02: #1b5e60;
  --HC_Green_03: #70e8a0;
  --HC_Green_04: #9ff4c1;
  --HC_Green_05: #c5f9d7;
  --HC_Green_06: #ddffe9;

  --HC_Black_01: #000;
  --HC_Black_02: #38383a;
  --HC_Black_03: #54565b;
  --HC_Black_04: #787d87;
  --HC_Black_05: #aaafbc;
  --HC_Black_Main_01: #646464;
  --HC_Black_Main_02: #696969;
  --HC_Black_Main_03: #979797;

  --HC_Gray_01: #c1c9d3;
  --HC_Gray_02: #cad2dd;
  --HC_Gray_03: #d6dee8;
  --HC_Gray_04: #e4ebf4;
  --HC_Gray_05: #f2f6f9;
  --HC_Gray_06: #f6fafd;
  --HC_Gray_07: #ccc;
  --HC_Gray_08: #D9D9D9;

  --HC_Purple_01: #aa38f6;
  --HC_Purple_02: #722ba1;
  --HC_Purple_03: #b668e9;
  --HC_Purple_04: #d59dfa;
  --HC_Purple_05: #e8c6fe;
  --HC_Purple_06: #f3e1ff;
  --HC_Purple_07: #f3e1ff;

  --HC_Skyblue_01: #1cbbff;
  --HC_Skyblue_02: #0082ba;
  --HC_Skyblue_03: #4ac9ff;
  --HC_Skyblue_04: #70d4ff;
  --HC_Skyblue_05: #97e0fe;
  --HC_Skyblue_06: #ceeefd;
  --HC_Skyblue_07: #edf8fd;

  --HC_Yellow_01: #ffb21c;
  --HC_Yellow_02: #b37700;
  --HC_Yellow_03: #ffc453;
  --HC_Yellow_04: #ffd075;
  --HC_Yellow_05: #fddb99;
  --HC_Yellow_06: #ffe7b8;
  --HC_Yellow_07: #fff8e9;

  --HC_Coral_01: #FF514B;
  --HC_Coral_02: #D71E18;
  --HC_Coral_03: #FF7B76;
  --HC_Coral_04: #FF9F9C;
  --HC_Coral_05: #FFC0BE;
  --HC_Coral_06: #FFD3D1;
  --HC_Coral_07: #FFE3E1;

  --HC_Emerald_01: #4ABE85;
  --HC_Emerald_02: #35855D;
  --HC_Emerald_03: #3ACE85;
  --HC_Emerald_04: #6BD6A1;
  --HC_Emerald_05: #8AE5BB;
  --HC_Emerald_06: #A4EBC7;
  --HC_Emerald_07: #CEF5E1;

  --HC_Indigo_01: #3F51B5;
  --HC_Indigo_02: #283593;
  --HC_Indigo_03: #5C6BC0;
  --HC_Indigo_04: #8793DB;
  --HC_Indigo_05: #A8B3F0;
  --HC_Indigo_06: #BEC7FA;
  --HC_Indigo_07: #DDE1F9;

  --HC_Orange_01: #FF5722;
  --HC_Orange_02: #D84315;
  --HC_Orange_03: #FF7043;
  --HC_Orange_04: #FF8A65;
  --HC_Orange_05: #FFAB91;
  --HC_Orange_06: #FFCCBC;
  --HC_Orange_07: #FBE9E7;

  --HC_Teal_01: #009688;
  --HC_Teal_02: #00695C;
  --HC_Teal_03: #26A69A;
  --HC_Teal_04: #4DB6AC;
  --HC_Teal_05: #80CBC4;
  --HC_Teal_06: #B2DFDB;
  --HC_Teal_07: #E0F2F1;

  --HC_Cobalt_01: #3D7BE0;
  --HC_Cobalt_02: #1A4C9F;
  --HC_Cobalt_03: #5394FF;
  --HC_Cobalt_04: #6CA4FF;
  --HC_Cobalt_05: #88B5FF;
  --HC_Cobalt_06: #A6C8FF;
  --HC_Cobalt_07: #C6DBFF;

  --HC_Pink_01: #E91E63;
  --HC_Pink_02: #C2185B;
  --HC_Pink_03: #EC407A;
  --HC_Pink_04: #F06292;
  --HC_Pink_05: #F48FB1;
  --HC_Pink_06: #F8BBD0;
  --HC_Pink_07: #FCE4EC;

  --HC_Coral_07: #FFE3E1;

  --HC_White_01: #fff;

  --popover_index: 1040;
  --top-bar-index: calc(var(--popover_index) - 1);
  --page_loader_index: 997;
  --left_menu_index: calc(var(--popover_index) - 1);
  --app_menu_index: calc(var(--page_loader_index) - 1);
  --NA_color: var(--HC_Gray_01);
}

body {
  width: 100%;
  height: 100%;
  background-color: var(--HC_White_01);
  font-family: 'Pretendard', heartcount, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
}

body.en {
  --font-family: 'Pretendard', heartcount, sans-serif;
  font-family: 'Pretendard', heartcount, sans-serif;
}

body.kr {
  --font-family: 'Pretendard', heartcount, sans-serif;
  font-family: 'Pretendard', heartcount, sans-serif;
}

body.jp {
  --font-family: 'Pretendard', 'Helvetica Neue', Helvetica, Arial, heartcount, sans-serif;
  font-family: 'Pretendard', 'Helvetica Neue', Helvetica, Arial, heartcount, sans-serif;
}

.typeface-display1 {
  font-size: 57px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: -0.25px;
}

body.kr .typeface-display1 {
  font-weight: 800;
}

.typeface-display2 {
  font-size: 45px;
  font-style: normal;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -0.2px;
}

body.kr .typeface-display2 {
  font-weight: 700;
}

.typeface-display3 {
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -0.2px;
}

body.kr .typeface-display3 {
  font-weight: 500;
}

.typeface-headline1 {
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
}

body.kr .typeface-headline1 {
  font-weight: 700;
}

.typeface-headline2 {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}

body.kr .typeface-headline2 {
  font-weight: 700;
}

.typeface-headline3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

body.kr .typeface-headline3 {
  font-weight: 700;
}

.typeface-title1 {
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

body.kr .typeface-title1 {
  font-weight: 700;
}

.typeface-title2 {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

body.kr .typeface-title2 {
  font-weight: 700;
}

.typeface-title3 {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}

.typeface-title4 {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.typeface-title5 {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

/* body.kr .typeface-title3 {
  font-size: 11px;
  font-weight: 700;
} */

.typeface-title6 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.typeface-label1 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

body.kr .typeface-label1 {
  font-weight: 600;
}

.typeface-label2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

body.kr .typeface-label2 {
  font-weight: 600;
}

.typeface-label3 {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

body.kr .typeface-label3 {
  font-weight: 600;
}

.typeface-label4 {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

body.kr .typeface-label4 {
  font-weight: 600;
}

.typeface-label5 {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}

.typeface-label6 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

.typeface-label7 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 12px;
}

.typeface-label8 {
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

body.kr .typeface-label4 {
  font-weight: 600;
}

.typeface-body1 {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
}

body.kr .typeface-body1 {
  letter-spacing: normal;
}

.typeface-body2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
}

body.kr .typeface-body2 {
  letter-spacing: normal;
}

.typeface-body3 {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.typeface-body4 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

.typeface-body5 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.typeface-body6 {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.typeface-body7 {
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

.typeface-body8 {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.typeface-body9 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.btn.btn-hc-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--HC_Red_01);
  border: 1px solid var(--HC_Red_01);
  color: var(--HC_White_01);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.btn.btn-hc-primary:focus {
  color: var(--HC_White_01);
  background: var(--HC_Red_Sub_01);
  border: 1px solid var(--HC_Red_Sub_01);
}

.btn.btn-hc-primary:hover {
  color: var(--HC_White_01);
  background: var(--HC_Red_Sub_01);
  border: 1px solid var(--HC_Red_Sub_01);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn.btn-hc-primary:active {
  color: var(--HC_White_01);
  border: 1px solid var(--HC_Red_Sub_01);
  background: var(--HC_Red_01);
}

.btn.btn-hc-primary:disabled {
  color: var(--HC_White_01);
  background: var(--HC_Red_05);
  border: 1px solid var(--HC_Red_05);
  opacity: 1;
}

.btn.btn-hc-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--HC_Black_05);
  border: 1px solid var(--HC_Black_05);
  color: var(--HC_White_01);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.btn.btn-hc-secondary:focus {
  color: var(--HC_White_01);
  background: var(--HC_Black_04);
  border: 1px solid var(--HC_Black_04);
}

.btn.btn-hc-secondary:hover {
  color: var(--HC_White_01);
  background: var(--HC_Black_04);
  border: 1px solid var(--HC_Black_04);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn.btn-hc-secondary:active {
  color: var(--HC_White_01);
  border: 1px solid var(--HC_Black_04);
  background: var(--HC_Black_05);
}

.btn.btn-hc-secondary:disabled {
  color: var(--HC_White_01);
  background: var(--HC_Gray_03);
  border: 1px solid var(--HC_Black_03);
  opacity: 1;
}

.btn.btn-hc-secondary:disabled {
  color: var(--HC_White_01);
  background: var(--HC_Gray_03);
  border: 1px solid var(--HC_Black_03);
  opacity: 1;
}

.btn.btn-hc-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--HC_Red_01);
  color: var(--HC_Red_01);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  &:disabled {
    color: var(--HC_White_01);
    background: var(--HC_Red_05);
    border: 1px solid var(--HC_Red_05);
    opacity: 1;
  }
  &:focus {
    background: var(--HC_Red_06);
    border: 1px solid var(--HC_Red_01);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.2px;
  }
  &:hover {
    color: var(--HC_Red_01);
    background: var(--HC_Red_06);
    border: 1px solid var(--HC_Red_01);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.2px;
  }
}

.btn.btn-hc-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--HC_Gray_03);
  background: var(--HC_White_01);
  color: var(--HC_Black_04);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  :disabled {
    color: var(--HC_White_01);
    background: var(--HC_Gray_03);
    border: 1px solid var(--HC_Black_03);
    opacity: 1;
  }
  &:hover {
    color: var(--HC_Black_04);
  }
}

.hc-btn {
  --bg: transparent;
  --border: transparent;
  --color: inherit;
  --hover-bg: var(--bg);
  --hover-border: var(--border);
  --hover-color: var(--color);
  --hover-shadow: none;

  --padding-y: 8px;
  --padding-x: 16px;
  --font-size: 14px;
  --font-weight: 400;
  --width: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--width);
  padding: var(--padding-y) var(--padding-x);

  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--color);

  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: 24px;

  cursor: pointer;
  transition: 
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
  &:hover:not(:disabled) {
    background: var(--hover-bg);
    border-color: var(--hover-border);
    color: var(--hover-color);
    box-shadow: var(--hover-shadow);
  }
  :focus:not(:disabled) {
    background: var(--focus-bg, var(--hover-bg));
    border-color: var(--focus-border, var(--hover-border));
    color: var(--focus-color, var(--hover-color));
    font-weight: 500;
    letter-spacing: -0.2px;
  }
  &:disabled {
    --bg: var(--HC_Gray_03);
    --border: var(--HC_Black_03);
    --color: var(--HC_White_01);
  
    cursor: not-allowed;
    opacity: 1;
  }
  &.hc-btn--primary {
    --bg: var(--HC_Red_01);
    --border: var(--HC_Red_01);
    --color: var(--HC_White_01);
  
    --hover-bg: var(--HC_Red_01);
    --hover-border: var(--HC_Red_01);
    --hover-color: var(--HC_White_01);
    --hover-shadow: 0 4px 4px rgba(0,0,0,.25);
  }
  &.hc-btn--secondary {
    --bg: var(--HC_White_01);
    --border: var(--HC_Gray_03);
    --color: var(--HC_Black_04);
  
    --hover-bg: var(--HC_White_01);
    --hover-border: var(--HC_Gray_03);
    --hover-color: var(--HC_Black_04);
  }
  &.hc-btn--confirm {
    --bg: transparent;
    --border: var(--HC_Red_01);
    --color: var(--HC_Red_01);
  
    --hover-bg: var(--HC_Red_06);
    --hover-border: var(--HC_Red_01);
    --hover-color: var(--HC_Red_01);
  
    --focus-bg: var(--HC_Red_06);
    --focus-border: var(--HC_Red_01);
    --focus-color: var(--HC_Red_01);
    &:disabled {
      --bg: var(--HC_Red_05);
      --border: var(--HC_Red_05);
      --color: var(--HC_White_01);
    }
  }
  &.hc-btn--full {
    --width: 100%;
  }
  &.hc-btn--lg {
    --width: 100%;
    --font-size: 16px;
    --padding-y: 8px;
    --padding-x: 16px;
    --font-weight: 400;
  }
  &.hc-btn--md {
    --font-size: 14px;
    --padding-y: 3px;
    --padding-x: 15px;
    --font-weight: 500;
  }
  &.hc-btn--sm {
    --font-size: 13px;
    --padding-y: 3px;
    --padding-x: 10px;
    --font-weight: 400;
  }
}