:root {
    --red:#e63946;
    --sky: #9fb4cc;
    --blue: #2563eb;
    --green: #16a34a;
    --yellow: #ffc107;
    --dark: #343a40;
    --gray: #d6dee8;
    --black: #212529;

    --white: #f2f2f2;
    --cyber: #00ff00;
    --clover: #0cd664;

    /* 사이즈 */
    --container-width: 1600px;
    --container-padding: 16px;
    --container-mobile-padding: 8px;
}

/* ========================================
   Fonts
======================================== */

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/pretendard.woff2") format("woff2");
}

@font-face {
  font-family: "D2Coding";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/d2coding-regular.woff2") format("woff2");
}

@font-face {
  font-family: "D2Coding";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/d2coding-bold.woff2") format("woff2");
}


/* ========================================
   Reset
======================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ========================================
   Base
======================================== */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #111;
  background-color: #fff;
}


/* ========================================
   Monospace
======================================== */

code,
kbd,
pre,
samp,
.monospace {
  font-family: "D2Coding", monospace;
}


/* ========================================
   Font Weight
======================================== */

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}


/* ========================================
   List
======================================== */

ul,
ol {
  list-style: none;
}


/* ========================================
   Link
======================================== */

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


/* ========================================
   Image / Video
======================================== */

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ========================================
   Button
======================================== */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}


/* ========================================
   Form
======================================== */

input,
textarea,
select {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

textarea {
  resize: vertical;
}


/* ========================================
   Table
======================================== */

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ========================================
   Focus
======================================== */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ========================================
   HTML5 Semantic Elements
======================================== */

article,
aside,
footer,
header,
nav,
section,
main {
  display: block;
}


/* 아이폰 화면확대 방지 */
@media (max-width: 1024px) {
    input:focus,
    textarea:focus {
        font-size: 16px !important;
    }
}

.reset {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 100%;
    font-weight: 400;
    line-height: 1.6;
    font-family: inherit;
    color: inherit;
    background: transparent;
    text-decoration: none;
    list-style: none;
    background: none;
    cursor: auto;
    display: block;
}

.pointer { cursor: pointer; }