/* font */

@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200;300;400;500;600;700&display=swap';

@font-face {
	font-family: 'Spoqa Han Sans Neo';
	font-weight: 700;
	src: local('Spoqa Han Sans Neo Bold'),
	url('./webfonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
	url('./webfonts/SpoqaHanSansNeo-Bold.woff') format('woff'),
	url('./webfonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}


@font-face {
	font-family: 'Spoqa Han Sans Neo';
	font-weight: 500;
	src: local('Spoqa Han Sans Neo Medium'),
	url('./webfonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
	url('./webfonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
	url('./webfonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Spoqa Han Sans Neo';
	font-weight: 400;
	src: local('Spoqa Han Sans Neo Regular'),
	url('./webfonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
	url('./webfonts/SpoqaHanSansNeo-Regular.woff') format('woff'),
	url('./webfonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Spoqa Han Sans Neo';
	font-weight: 300;
	src: local('Spoqa Han Sans Neo Light'),
	url('./webfonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
	url('./webfonts/SpoqaHanSansNeo-Light.woff') format('woff'),
	url('./webfonts/SpoqaHanSansNeo-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Spoqa Han Sans Neo';
	font-weight: 100;
	src: local('Spoqa Han Sans Neo Thin'),
	url('./webfonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
	url('./webfonts/SpoqaHanSansNeo-Thin.woff') format('woff'),
	url('./webfonts/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}

/* 검색창은 움직이는 효과 대신 상태가 분명한 단색 테두리를 사용합니다. */
.gradient-border {
		border: 1px solid #cbd5e1;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gradient-border:focus-within {
		border-color: #00a8e8;
		box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.1);
}