@charset "UTF-8";

/*
 * Css Framework  v0.1 sample
 *
 * @author Nuel Ha
 * @since 2023.02.23
 *
 * << 개정이력(Modification Information)>>
 *
 *   수정일          수정자                수정내용
 * -------------   --------    ---------------------------
 * 2023. 02. 23      하　늘        최초 생성
 */

/*
 * 사용방법
 * 1. 각 테마(light/dark)에 맞게 메인컬러와 서브컬러를 지정한다.
 * 2. 기본 폰트를 설정한다.
 * 3. 기본 변수 설정(option)
 */

/* ========================================================================
   1. 컬러 설정
 ========================================================================== */
:root,
:root[data-theme="light"] {
  /* 라이트(기본) 테마 */
  /* 컬러 셋팅 */
  /* 기본 폰트 컬러 */
  --Default: #29292b;
  --Background: #ffffff;

  /* 메인컬러 & 서브컬러 지정 */
  --Primary1: #0860ce;
  --Primary2: #55bbd3;
  --Primary3: #31e493;

  /* 그레이스케일 컬러 */
  --Greyscale9: #29292b;
  --Greyscale8: #36373c;
  --Greyscale7: #4d4f56;
  --Greyscale6: #878991;
  --Greyscale5: #a9abb3;
  --Greyscale4: #ced0d6;
  --Greyscale3: #dee0e6;
  --Greyscale2: #e9eaef;
  --Greyscale1: #f1f3f5;
  --Greyscale0: #f8f9fb;

  /* 기본 시스템 컬러 */
  --Error: #d32f2f;
  --Warning: #f9a825;
  --Success: #4caf50;
  --information: #0091ea;

  /* 기본사이즈 */
  --containerSize: 1480px;
}

:root[data-theme="dark"] {
  /* 다크모드 테마 */
  /* 컬러 셋팅 */
  /* 기본 폰트 컬러 */
  --Default: #ffffff;
  --Background: #29292b;

  /* 메인컬러 & 서브컬러 지정 */
  --Primary1: #0860ce;
  --Primary2: #55bbd3;
  --Primary3: #31e493;

  /* 그레이스케일 컬러 */
  --Greyscale0: #29292b;
  --Greyscale1: #36373c;
  --Greyscale2: #4d4f56;
  --Greyscale3: #878991;
  --Greyscale4: #a9abb3;
  --Greyscale5: #ced0d6;
  --Greyscale6: #dee0e6;
  --Greyscale7: #e9eaef;
  --Greyscale8: #f1f3f5;
  --Greyscale9: #f8f9fb;

  /* 기본 시스템 컬러 */
  --Error: #d32f2f;
  --Warning: #f9a825;
  --Success: #4caf50;
  --information: #0091ea;
}

/* ========================================================================
   2. 기본 폰트 설정
 ========================================================================== */
:root {
  font-family: "Pretendard GOV", -apple-system, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

/*
 * 기본서체
 * 경량화된 Noto Sans KR 적용
*/
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 900;
  font-display: block;
  src: local("Pretendard GOV Black"),
    url(../fonts/woff2/PretendardGOV-Black.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Black.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 800;
  font-display: block;
  src: local("Pretendard GOV ExtraBold"),
    url(../fonts/woff2/PretendardGOV-ExtraBold.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-ExtraBold.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-display: block;
  src: local("Pretendard GOV Bold"),
    url(../fonts/woff2/PretendardGOV-Bold.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Bold.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 600;
  font-display: block;
  src: local("Pretendard GOV SemiBold"),
    url(../fonts/woff2/PretendardGOV-SemiBold.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-SemiBold.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 500;
  font-display: block;
  src: local("Pretendard GOV Medium"),
    url(../fonts/woff2/PretendardGOV-Medium.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Medium.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-display: block;
  src: local("Pretendard GOV Regular"),
    url(../fonts/woff2/PretendardGOV-Regular.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Regular.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 300;
  font-display: block;
  src: local("Pretendard GOV Light"),
    url(../fonts/woff2/PretendardGOV-Light.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Light.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 200;
  font-display: block;
  src: local("Pretendard GOV ExtraLight"),
    url(../fonts/woff2/PretendardGOV-ExtraLight.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-ExtraLight.woff) format("woff"); */
}

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 100;
  font-display: block;
  src: local("Pretendard GOV Thin"),
    url(../fonts/woff2/PretendardGOV-Thin.woff2) format("woff2");
  /* url(../fonts/woff/PretendardGOV-Thin.woff) format("woff"); */
}

/* ========================================================================
   3. 기본 변수 설정(option)
 ========================================================================== */
:root {
  /*
  * 그리드 시스템
  * -> 주의! 수정해도 반응형에 반영 안됨
  */
}

/* ========================================================================
   CSS RESET / PREFIX
 ========================================================================== */

:root {
  /* 아이폰 폰트 깨지는 현상 수정 */
  /* 크롬, 사파리, 오페라 신버전 */
  -webkit-text-size-adjust: 100%;
  /* IE */
  -ms-text-size-adjust: 100%;
  /* 파이어폭스 */
  -moz-text-size-adjust: 100%;
  /* 오페라 구버전 */
  -o-text-size-adjust: 100%;
}

body {
  background-color: var(--Background);
}

table,
th,
td,
input,
select,
button,
textarea,
pre {
  font: inherit;
  color: inherit;
}

body,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
select,
button,
textarea,
p,
blockquote,
table,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img,
fieldset {
  border: 0;
}

img {
  vertical-align: middle;
}

a {
  color: var(--Default);
  text-decoration: none;
}

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

th,
td {
  word-break: break-all;
  word-wrap: break-word;
}

label {
  cursor: pointer;
}

input,
button {
  border: 0;
  border-radius: 0;
  background-color: unset;
}

textarea {
  resize: none;
}

input,
button,
select,
textarea {
  vertical-align: middle;
}

address,
caption,
cite,
code,
dfn,
em,
var {
  font-style: normal;
}

hr {
  clear: both;
  display: none;
}

blockquote,
q {
  quotes: none;
}

abbr,
acronym {
  border: 0;
}

legend,
caption {
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  text-indent: -99999px;
  font-size: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

/* ========================================================================
   Grid System
 ========================================================================== */

.container {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 1px;
  justify-content: space-between;
  box-sizing: border-box;
}

.row .col {
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding: 16px;
  max-width: 100%;
}

@media (max-width: 319px) {
  .container {
    width: calc(100% - 32px);
  }

  .row .col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 8px;
  }
}

/* 작은 모바일(플립, 아이폰 SE 등) ~ 모바일 */
@media (min-width: 320px) {
  .container {
    width: calc(100% - 32px);
  }

  .row .col {
    padding: 8px;
  }

  .row .col.m1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.m2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.m3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.m4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.m5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.m6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.m7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.m8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.m9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.m10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.m11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.m12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.m-5 {
    max-width: 20%;
    flex-basis: 20%;
  }
}

/* 태블릿 */
@media (min-width: 768px) {
  .container {
    width: calc(100% - 64px);
  }

  .row .col {
    padding: 8px;
  }

  .row .col.t1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.t2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.t3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.t4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.t5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.t6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.t7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.t8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.t9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.t10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.t11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.t12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.t-5 {
    max-width: 20%;
    flex-basis: 20%;
  }
}

/* 데스크탑 ~ 전체 화면 */
@media (min-width: 1200px) {
  .container {
    width: calc(100% - 64px);
  }

  .row .col {
    padding: 16px;
  }

  .row .col.d1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }

  .row .col.d2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }

  .row .col.d3 {
    max-width: 25%;
    flex-basis: 25%;
  }

  .row .col.d4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }

  .row .col.d5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }

  .row .col.d6 {
    max-width: 50%;
    flex-basis: 50%;
  }

  .row .col.d7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }

  .row .col.d8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }

  .row .col.d9 {
    max-width: 75%;
    flex-basis: 75%;
  }

  .row .col.d10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }

  .row .col.d11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }

  .row .col.d12 {
    max-width: 100%;
    flex-basis: 100%;
  }

  .row .col.d-5 {
    max-width: 20%;
    flex-basis: 20%;
  }
}

/* ========================================================================
   Media Query Classes
 ========================================================================== */

@media only screen and (max-width: 767px) {
  .showM {
    display: block !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .showT {
    display: block !important;
  }
}

@media only screen and (min-width: 1200px) {
  .showD {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {
  .hideM {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .hideT {
    display: none !important;
  }
}

@media only screen and (min-width: 1200px) {
  .hideD {
    display: none !important;
  }
}