@charset "utf-8";

/* =====================================================
   폰트
===================================================== */
@font-face {
    font-family: 'Pretendard GOV';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/PretendardGOV/PretendardGOV-Regular.woff2') format('woff2'),
         url('../fonts/PretendardGOV/PretendardGOV-Regular.woff') format('woff'),
         url('../fonts/PretendardGOV/PretendardGOV-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard GOV';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/PretendardGOV/PretendardGOV-Medium.woff2') format('woff2'),
         url('../fonts/PretendardGOV/PretendardGOV-Medium.woff') format('woff'),
         url('../fonts/PretendardGOV/PretendardGOV-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard GOV';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/PretendardGOV/PretendardGOV-Bold.woff2') format('woff2'),
         url('../fonts/PretendardGOV/PretendardGOV-Bold.woff') format('woff'),
         url('../fonts/PretendardGOV/PretendardGOV-Bold.otf') format('opentype');
}

/* =====================================================
   root 정의
===================================================== */
:root {
    --headerHeight: 16.8rem;
    --inner: 1280px;
    --font-type: 'Pretendard GOV', sans-serif;
    --font-size-large: 2.2rem;
    --font-size-medium: 1.9rem;
    --font-size-small: 1.7rem;
    --font-size-xsmall: 1.5rem;
    --line-height: 1.5;
    --trs-base: 0.4s ease-in-out;

    /* Primary */
    --primary-5:  #ecf2fe;
    --primary-10: #d8e5fd;
    --primary-50: #256ef4;
    --primary-60: #0b50d0;
    --primary-70: #083891;

    /* Secondary */
    --secondary-5:  #eef2f7;
    --secondary-10: #d6e0eb;
    --secondary-50: #346fb2;
    --secondary-60: #1c589c;
    --secondary-70: #063a74;

    /* Gray */
    --gray-0:   #ffffff;
    --gray-5:   #f4f5f6;
    --gray-10:  #e6e8ea;
    --gray-20:  #cdd1d5;
    --gray-30:  #b1b8be;
    --gray-40:  #8a949e;
    --gray-50:  #6d7882;
    --gray-60:  #58616a;
    --gray-70:  #464c53;
    --gray-80:  #33363d;
    --gray-90:  #1e2124;
    --gray-95:  #131416;
    --gray-100: #000000;

    /* Radius */
    --radius-small:  0.4rem;
    --radius-medium: 0.6rem;
    --radius-large:  0.8rem;
    --radius-xlarge: 1.2rem;
}

/* =====================================================
   리셋
===================================================== */
html {
    overflow-x: hidden;
    box-sizing: border-box;
    font-size: 10px;
    scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: inherit; }

*:focus {
    outline: 2px solid var(--primary-50);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 3px var(--gray-0);
}

body {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-medium);
    line-height: var(--line-height);
    font-family: var(--font-type);
    color: var(--gray-90);
    word-break: keep-all;
    overflow-x: hidden;
}

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

ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }

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

fieldset, hr { display: block; margin: 0; padding: 0; border: 0; }

address, em, i { font-style: normal; }

a, button {
    color: inherit;
    text-decoration: none;
    line-height: inherit;
    text-underline-offset: 0.3rem;
    transition: var(--trs-base);
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-type);
    font-size: inherit;
}

img { max-width: 100%; border: 0; vertical-align: middle; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

caption {
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    position: absolute;
}

/* =====================================================
   접근성 유틸리티
===================================================== */

/* 화면에 보이지 않지만 스크린리더에서 읽힘 */
.sr-only, .blind, .hidden, .IR {
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

/* 건너뛰기 내비게이션 */
#skip_nav {
    position: absolute;
    left: 0;
    top: -1000px;
    width: 100%;
    z-index: 9999;
}

#skip_nav a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

#skip_nav a:focus,
#skip_nav a:hover {
    position: absolute;
    top: 1000px;
    padding: 10px 0;
    height: auto;
    background: #20262c;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
}

/* 새창 아이콘 */
.linkWindow::after {
    content: "\e980";
    display: inline-block;
    margin-left: 0.4rem;
    font-family: "xeicon", sans-serif;
    line-height: 1;
}

/* 공통 컨테이너 */
.inner {
    width: var(--inner);
    max-width: calc(100% - 2rem);
    margin: 0 auto;
}

/* 미디어 반응형 폰트 */
@media (max-width: 1280px) { html { font-size: 9px; } }
@media (max-width: 360px)  { html { font-size: 8px; } }