@charset "utf-8";

 @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('../css/fonts/NotoSansKR-Thin.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Thin.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Thin.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Thin.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-Thin.svg#NotoSansKR-Thin') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
    src: url('../css/fonts/NotoSansKR-Light.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Light.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Light.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Light.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-Light.svg#NotoSansKR-Light') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url('../css/fonts/NotoSansKR-DemiLight.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-DemiLight.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-DemiLight.woff') format('woff'),
    url('../css/fonts/NotoSansKR-DemiLight.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-DemiLight.svg#NotoSansKR-DemiLight') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('../css/fonts/NotoSansKR-Regular.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Regular.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Regular.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Regular.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-Regular.svg#NotoSansKR-Regular') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url('../css/fonts/NotoSansKR-Medium.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Medium.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Medium.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Medium.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-Medium.svg#NotoSansKR-Medium') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url('../css/fonts/NotoSansKR-Bold.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Bold.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Bold.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Bold.ttf') format('truetype'),
    url('../css/fonts/NotoSansKR-Bold.svg#NotoSansKR-Bold') format('svg');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url('../css/fonts/NotoSansKR-Black.eot?') format('eot'),
    url('../css/fonts/NotoSansKR-Black.woff2') format('woff2'),
    url('../css/fonts/NotoSansKR-Black.woff') format('woff'),
    url('../css/fonts/NotoSansKR-Black.ttf')  format('truetype'),
    url('../css/fonts/NotoSansKR-Black.svg#NotoSansKR-Black') format('svg');
} 




/* ====== RESET.CSS (정리/최적화/접근성 강화) ====== */

/* 1. */
*, ::before, ::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    cursor: default;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    word-break: break-word;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/* 2.  */
body, div, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6,
input, legend, ul, li, ol, p, select, table, td, textarea, th {
    margin: 0;
    padding: 0;
}

/* 3.  */
body, button, input, select, table, textarea, pre {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hl-text);
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "나눔고딕", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", arial, dotum, 돋움, sans-serif;
    background: var(--hl-white);
}

/* 4.  */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
}
b, dt { font-weight: bold; }
small { font-size: 80%; }
address, em, i { font-style: normal; }
abbr[title] { text-decoration: underline dotted; }
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* 5.  */
dl, ol, ul, li, menu { list-style: none; }
main, details { display: block; }
hr { height: 0; overflow: visible; }

/* 6.  */
audio, canvas, iframe, img, svg, video {
    display: inline-block;
    max-width: 100%;
}
iframe, fieldset { border: 0; }

/* 7.  */
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

/* 8.  */
button, input, select, textarea, optgroup {
    color: inherit;
    font: inherit;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
button, [type="button"], [type="reset"], [type="submit"] {
    appearance: button;
    cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--hl-information);
    padding: 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand { display: none; }
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; height: auto; margin: 0; }
input[type="search"] { appearance: textfield; outline-offset: -2px; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }
textarea {
    padding: 10px;
    overflow: auto;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid #757575;
}

/* 9. */
caption, legend {
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
}

/* 10.  */
a, a:hover, a:active, a:focus {
    color: inherit;
    text-decoration: none;
}
/* ::selection {
    background: #bbbbbb;
    color: #333;
    text-shadow: none;
} */

/* 11.  */
*:focus {
    outline-offset: -0.4rem;
    outline: 2px solid var(--hl-information);
}

button:focus-visible {
    outline-offset: 0.4rem;
    outline: 2px solid var(--hl-information);
}

/* 12.  */
[hidden] { display: none; }
[aria-busy="true"] { cursor: progress; }
[aria-controls] { cursor: pointer; }
[aria-disabled="true"], [disabled] { cursor: not-allowed; }
[aria-hidden="false"][hidden] { display: initial; }
[aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

/* 13.  */
a, area, button, input, label, select, summary, textarea, [tabindex] {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    vertical-align: middle;
}

/* 14.  */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
::-moz-focus-inner { border: 0; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }
:-moz-ui-invalid { box-shadow: none; }
progress { display: inline-block; vertical-align: baseline; }
summary { display: list-item; }

/* input 
=============================================================== */
input {
    &[type="tel"],
    &[type="text"],
    &[type="email"],
    &[type="search"],
    &[type="number"],
    &[type="password"] { height: 50px; padding: 5px 14px; border: 1px solid var(--hl-gray-60); border-radius: 8px; background: var(--hl-white); }
    &:disabled { color: var(--hl-gray-70); background: var(--hl-gray-20); border-color: var(--hl-gray-40);}
}
.byte { width: 80px; height: 40px !important; margin: 10px 10px 0 0;}
select { border: 1px solid #757575; }