/* @font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

/* @font-face {
    font-family: 'Noto Sans KR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */
@font-face {
    font-family: 'Noto Sans KR';
    src: url('/static/fonts/NotoSansKR-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}


::-webkit-scrollbar {
    background-color: transparent;
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-text) / 10%); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
::-webkit-scrollbar-track {
    background-color: rgb(var(--color-text) / 5%); /* 스크롤바 뒷 배경 색상 */
}


* {
    box-sizing: border-box;
}
body {
    /* display: flow-root; */
    width: 100%;
    /* overflow-y: scroll; */
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    margin: 0;
    height: 100%;
    font-size: 62.5%;
    line-height: 1.3;
    word-break: break-word;
    -webkit-text-size-adjust: none;

    
    letter-spacing: -.1px;


    font-family: 'Noto Sans KR', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -.00rem;
    letter-spacing: -.5px;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-color));
}
/* 바디/HTML은 스크롤 금지(고정 레이어로 유지) */
html, body{
    height: 100%;
    margin: 0;
    overflow: hidden;
}
input, textarea, select {
    color: rgb(var(--color-text));
}
ol, ul, menu {
    list-style: none;
}
ul, ol {
    list-style: none;
    padding-left: 0px;
    margin: 0;
    padding: 0;
}
button, a {
    color: inherit;
    text-decoration: none;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;

    display: block;
}
._hidden {
    overflow: hidden;
    white-space: nowrap;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
:root {   
    --color-background: 255 255 255;
    --color-background-1: 243 244 248;
    --color-background-2: 242 242 242;
    --color-text: 15 15 15;
    --color-text-1: 5 23 102;
    --color-text-2: 28 171 226;
    --color-textsub: 85 85 85;
    --color-border: 221 221 221;

    --color-white: 255 255 255;
    --color-color: 45 41 38;
    --color-color1: 5 23 102;
    --color-color2: 28 171 226;
    --color-color3: 87 187 235;
    --color-color4: 247 247 247;
    --color-color5: 243 244 248;
    --color-color5: 94 94 94;
    --color-border: 217 217 217;
    

    
    --header-h: 50px;
    --header-side: 240px;
    --header-side-active: 70px;

}
@media (min-width: 800px){
    :root{
        --header-h: 70px;
    }
}
/* 시스템 설정을 기본으로 하고 싶다면: html에 data-theme 안 붙인 상태에서 */
/* @media (prefers-color-scheme: light) {
    :root {
      --color-background: 255 255 255;
      --color-text: 15 15 15;
      --color-textsub: 85 85 85;
      --color-border: 221 221 221;
    }
} */
html[data-theme="dark"] {
    --color-background: 15 15 15;
    --color-background-1: 30 30 30;
    --color-background-2: 33 33 33;
    --color-text: 255 255 255;
    --color-text-1: 247 247 247;
    --color-text-2: 131 131 131;
    --color-border: 231 231 231;
    --color-textsub: 85 85 85;
}
svg {
    display: block;
    pointer-events: none;
}body, button, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, table, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
@media (min-width:1060px) {
    [class]._pc-hidden {
        display: none !important;
    }
}
@media (max-width:1060px) {
    [class]._mo-hidden {
        display: none !important;
    }
}

/* Chrome, Safari, Edge */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* Firefox */
input[type="search"]::-moz-search-clear-button {
    display: none;
}

input::placeholder,
textarea::placeholder {
    font-weight: 400;
}


/* 링크 */
.link {
    display: inline-block;
    border: 0;
    background: none transparent;
    color: rgb(var(--color-text));
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    text-indent: 0;
}
.link.-inner:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 0;
    background: url(/pages/header/images/ico-link-inner.svg) no-repeat center center;
    background-size: 16px 16px;
    vertical-align: -5px;
}
/* // 링크 */

#root {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h));
    padding-top: calc(env(safe-area-inset-top, 0px) + 0px);
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
    display: flex;
    flex-direction: column;
}