@charset "utf8";

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

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


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

:root{
  /* === Brand Colors === */
  --primary: #367CFE;
  --secondary: #98A4AE;
  --tertiary: #191919;
  --bg-brand: #EFF2F6;

  /* Primary Transparency */
  --primary-t20: rgba(54, 124, 254, 0.2);
  --primary-t50: rgba(54, 124, 254, 0.5);

  /* === System Colors - Font === */
  --font1: #111111;    /* F1 - Primary text */
  --font2: #505050;    /* F2 - Secondary text */
  --font3: #767676;    /* F3 - Tertiary text */
  --font4: #999999;    /* Disabled text */

  /* === System Colors - Line === */
  --line1: #111111;    /* L1 - Primary line */
  --line2: #E1E1E4;    /* L2 - Secondary line */
  --line3: #E9E9ED;    /* L3 - Tertiary line */

  /* === System Colors - Background === */
  --bg1: #F1F1F5;      /* B1 - Primary background */
  --bg2: #F8F8FA;      /* B2 - Secondary background */
  --bg3: #F8F8FA;      /* Legacy - mapped to B2 */

  /* === BasicG (Grayscale) === */
  --gray-10: #F8F8FA;
  --gray-20: #F1F1F5;
  --gray-30: #E9E9ED;
  --gray-40: #E1E1E4;
  --gray-50: #999999;
  --gray-60: #767676;
  --gray-70: #505050;
  --gray-80: #303030;
  --gray-90: #111111;

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

  /** Typography System - Figma Design Tokens */
  /* Heading */
  --f1: 2.25rem;      /* 36px - Heading XL */
  --l1: 1.3;          /* 130% */
  --f2: 1.75rem;      /* 28px - Heading L */
  --l2: 1.4;          /* 140% */

  /* Title */
  --f3: 1.625rem;     /* 26px - Title XL */
  --l3: 1.4;          /* 140% */
  --f4: 1.375rem;     /* 22px - Title L */
  --l4: 1.5;          /* 150% */
  --f5: 1.125rem;     /* 18px - Title M */
  --l5: 1.5;          /* 150% */
  --f6: 1rem;         /* 16px - Title S */
  --l6: 1.5;          /* 150% */

  /* Label */
  --f7: 0.75rem;      /* 12px - Label S */
  --l7: 1.5;          /* 150% */

  /* Reserved for future use */
  --f8: 1rem;
  --l8: 1.5;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
}
@media only screen and (max-width: 767px) {
  :root {
    /* Mobile Typography - Scaled from Figma Design Tokens */
    /* Heading */
    --f1: 1.75rem;     /* 28px - Heading XL (Mobile) */
    --l1: 1.3;         /* 130% */
    --f2: 1.5rem;      /* 24px - Heading L (Mobile) */
    --l2: 1.4;         /* 140% */

    /* Title */
    --f3: 1.375rem;    /* 22px - Title XL (Mobile) */
    --l3: 1.4;         /* 140% */
    --f4: 1.125rem;    /* 18px - Title L (Mobile) */
    --l4: 1.5;         /* 150% */
    --f5: 1rem;        /* 16px - Title M (Mobile) */
    --l5: 1.5;         /* 150% */
    --f6: 0.875rem;    /* 14px - Title S (Mobile) */
    --l6: 1.5;         /* 150% */

    /* Label */
    --f7: 0.75rem;     /* 12px - Label S (Mobile) */
    --l7: 1.5;         /* 150% */

    /* Reserved for future use */
    --f8: 0.75rem;
    --l8: 1.5;
  }
}

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



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;
}