@charset "utf8";

/**
  * GUPSA COMMON CSS
  * - w/ font.css
  * - w/ normalize.css
  *
  */

@import "font.css";
@import "normalize.css";


/** -------------------------- 크기나 색상 등 기본 설정 시작 ----------------------------    */

:root{
  /** 브랜드 컬러 */
  --primary: #B11116;
  --secondary: #E39627;
  --tertiary: #55555B;
  --brand-bg: #EFF2F6;

  /** 브랜드 컬러 투명도 */
  --primary-t20: rgba(177, 17, 22, 0.2);
  --primary-t50: rgba(177, 17, 22, 0.5);

  /** 시스템 컬러 - BasicG */
  --g10: #F8F8FA;
  --g20: #F1F1F5;
  --g30: #E9E9ED;
  --g40: #E1E1E4;
  --g50: #999999;
  --g60: #767676;
  --g70: #505050;
  --g80: #333333;
  --g90: #111111;

  /** 시스템 컬러 - Font */
  --f-1: #333333;
  --f-2: #505050;
  --f-3: #767676;
  --f-disable: #999999;

  /** 시스템 컬러 - Line */
  --l-1: #111111;
  --l-2: #E1E1E4;
  --l-3: #E9E9ED;

  /** 시스템 컬러 - Background */
  --b-1: #F1F1F5;
  --b-2: #F8F8FA;

  /** State Colors */
  --error: #E31100;
  --success: #04B014;
  --info: #0063F7;
  --warning: #FFCC00;

  /** 기존 변수명 유지 (하위 호환성) */
  --font1: #111;
  --font2: #505050;
  --font3: #767676;
  --font4: #adadad;
  --line1: #111;
  --line2: #E1E1E4;
  --line3: #E9E9ED;
  --bg1: #F1F1F5;
  --bg2: #F8F8FA;
  --bg3: #F1F1F4;

  /** font-weight 설정 */
  --bold: 700;
  --semibold: 600;
  --regular: 400;
  --light: 300;
  
  /** 사이즈 설정 (피그마 가이드 기준) */
  --f1: 2.25rem;   /* 36px */
  --l1: 1.3;       /* 130% */
  --f2: 1.75rem;   /* 28px */
  --l2: 1.4;       /* 140% */
  --f3: 1.625rem;  /* 26px */
  --l3: 1.4;       /* 140% */
  --f4: 1.375rem;  /* 22px */
  --l4: 1.5;       /* 150% */
  --f5: 1.125rem;  /* 18px */
  --l5: 1.5;       /* 150% */
  --f6: 1rem;      /* 16px - 기본 */
  --l6: 1.5;       /* 150% */
  --f7: 0.75rem;   /* 12px */
  --l7: 1.5;       /* 150% */
}
@media only screen and (max-width: 768px) {
  :root {
    --f1: 1.75rem;   /* 28px */
    --f2: 1.5rem;    /* 24px */
    --f3: 1.375rem;  /* 22px */
    --f4: 1.25rem;   /* 20px */
    --f5: 1rem;      /* 16px */
    --f6: 0.875rem;  /* 14px */
    --f7: 0.75rem;   /* 12px */
  }
}

/** -------------------------- 크기나 색상 등 기본 설정 끝 ----------------------------    */

html{
  -webkit-touch-callout:none; 
  -webkit-user-select:none; 
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  overflow-x: hidden;
  line-height: normal;
}

body, body * {
  box-sizing: border-box;
}

h1{
  font-size: initial;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;  
}


button,
input,
optgroup,
select,
textarea {
  font-size: inherit;
  line-height: normal; /* 1 */
}

fieldset {
  padding: 0;
}


a {
  color: inherit;
  text-decoration: none;
}

address, em{
	font: inherit;
}

ul{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

button, input[type=submit]{
  border: none;
  background: none;
  box-shadow: none;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: var(--f6);
  line-height: var(--l6);
  color: var(--font1);
}

/** -------------------------- 폰트 타이포그래피 유틸리티 클래스 ----------------------------    */

/* 36px - SemiBold, Regular */
.text-36sb {
  font-size: var(--f1);
  line-height: var(--l1);
  font-weight: var(--semibold);
}

.text-36 {
  font-size: var(--f1);
  line-height: var(--l1);
  font-weight: var(--regular);
}

/* 28px - Light */
.text-28l {
  font-size: var(--f2);
  line-height: var(--l2);
  font-weight: var(--light);
}

/* 26px - SemiBold */
.text-26sb {
  font-size: var(--f3);
  line-height: var(--l3);
  font-weight: var(--semibold);
}

/* 22px - SemiBold, Light */
.text-22sb {
  font-size: var(--f4);
  line-height: var(--l4);
  font-weight: var(--semibold);
}

.text-22l {
  font-size: var(--f4);
  line-height: var(--l4);
  font-weight: var(--light);
}

/* 18px - SemiBold, Regular, Light */
.text-18sb {
  font-size: var(--f5);
  line-height: var(--l5);
  font-weight: var(--semibold);
}

.text-18 {
  font-size: var(--f5);
  line-height: var(--l5);
  font-weight: var(--regular);
}

.text-18l {
  font-size: var(--f5);
  line-height: var(--l5);
  font-weight: var(--light);
}

/* 16px - SemiBold, Regular, Light (기본 폰트) */
.text-16sb {
  font-size: var(--f6);
  line-height: var(--l6);
  font-weight: var(--semibold);
}

.text-16 {
  font-size: var(--f6);
  line-height: var(--l6);
  font-weight: var(--regular);
}

.text-16l {
  font-size: var(--f6);
  line-height: var(--l6);
  font-weight: var(--light);
}

/* 12px - Regular */
.text-12 {
  font-size: var(--f7);
  line-height: var(--l7);
  font-weight: var(--regular);
}

/* 포인트 폰트 - S-Core Dream */
.text-scoredream {
  font-family: 'S-Core Dream', sans-serif;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: var(--regular);
}

/* Noto Sans KR */
.text-noto {
  font-family: 'Noto Sans KR', sans-serif;
}

.text-noto-bold {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: var(--bold);
}

/* Roboto */
.text-roboto {
  font-family: 'Roboto', sans-serif;
}

.text-roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: var(--bold);
}