@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600&family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

:root {
    --header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
    --container-narrow: 1280;
    --container: 1400;
    --container-wide: 1762;
    --container-scale: 0.92;
    --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
    --primary: #1a509e;
    --secondary: #e87a4a;
    --placeholder-bg: #444444;
    --white: #fff;
    --black: #222;
    --border-color: #ddd;
    /* components.css 공유 */
    --border-color-hover: #444;
    /* components.css 공유 */
    --font-pret: "Aggravo", "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
    --font-sans: var(--font-pret);
    --toggle-nav-button-size: 24rem;
    /* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
    --placeholder-image-bg: #e0e0e0;
    --placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
    --placeholder-image-size: min(60%, 200rem);
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
}

/* #region view transition, scroll behavior */
/* html{ scroll-padding-top: var(--header-height); } */
@media (prefers-reduced-motion: no-preference) {

    /* @view-transition  { navigation: auto; } */
    html {
        scroll-behavior: smooth;
    }
}

/* 
 * base CSS Document
 */

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

body,
input,
textarea,
button,
select {
    font-family: 'Fira Sans', 'Noto Sans KR', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;
    color: #444;
}

html,
body {
    font-size: 15px;
    line-height: 1.5;
}

html::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

html::-webkit-scrollbar-thumb {
    background-color: #9b9b9b;
    border-radius: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
}

input,
textarea,
button,
select {
    font-size: 0.9375rem;
}

img,
fieldset,
button {
    border: 0;
}

textarea {
    overflow: auto;
}

input[type=submit],
input[type=button],
button {
    cursor: pointer;
}

img {
    vertical-align: top;
}

address,
em {
    font-style: normal;
}

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

table,
th,
td {
    border: none;
}

caption {
    overflow: hidden;
    line-height: 0;
    text-indent: -2000em;
}

legend,
.hidden {
    padding: 0;
    margin: 0;
    overflow: hidden !important;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0;
}

i {
    font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

figure {
    padding: 0px;
    margin: 0px;
}

/* 링크 기본값 */
a:link {
    text-decoration: none;
    color: #444;
}

a:visited {
    text-decoration: none;
    color: #444;
}

a:hover {
    text-decoration: none;
    color: #444;
}

a:active {
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

/* 리스트 스타일 제거 */
ul,
ol,
li {
    list-style: none;
}

/* mobile */
body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

#container {
    min-height: 560px;
}

.container {
    position: relative;
    width: calc(var(--container-scale) * 100%);
    max-width: calc(var(--container) * 1rem);
    margin-inline: auto;

    &.container--narrow {
        max-width: calc(var(--container-narrow) * 1rem);
    }

    &.container--wide {
        max-width: calc(var(--container-wide) * 1rem);
    }

    &.container--fluid {
        width: auto;
        max-width: none;
    }
}

#header .img-logo {
    max-height: 30px;
}