/* 전체 페이지에서 공통으로 적용할 수 있는 스타일 */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url('/css/fonts/NotoSansKR-Thin.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Thin.woff') format('woff'), url('/css/fonts/NotoSansKR-Thin.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url('/css/fonts/NotoSansKR-Light.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Light.woff') format('woff'), url('/css/fonts/NotoSansKR-Light.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url('/css/fonts/NotoSansKR-Regular.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Regular.woff') format('woff'), url('/css/fonts/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url('/css/fonts/NotoSansKR-Medium.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Medium.woff') format('woff'), url('/css/fonts/NotoSansKR-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url('/css/fonts/NotoSansKR-Bold.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Bold.woff') format('woff'), url('/css/fonts/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url('/css/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/css/fonts/NotoSansKR-Black.woff') format('woff'), url('/css/fonts/NotoSansKR-Black.otf') format('opentype');
}

body, talbe, th, td, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, textarea, blockquote, span, * {
	font-family: 'Noto Sans KR', sans-serif;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%; /* 화면 전체 높이 */
}

body {
	display: flex;
	flex-direction: column;
	background-color: #F6F6F9; /* 상단 고정 헤더 + 아래 콘텐츠 */
}

/* 헤더 고정 */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 74px;
	padding: 0 33px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	z-index: 10; /* 다른 콘텐츠가 헤더 밑으로 가는 것을 방지 */
}

/* 콘텐츠 영역, 헤더 아래에 자동으로 배치 */
#main-content {
	margin-top: 74px; /* 헤더 높이만큼 여백 */
	flex: 1; /* 나머지 공간을 차지하도록 설정 */
	display: flex;
	justify-content: center;
	background-color: #f6f6f9;
}

.sentence-checkbox-img, .keyword-checkbox-img {
	width: 24px;
	height: 24px;
}

button {
	all: unset; /* 기본 스타일 제거 */
	font-family: 'Noto Sans KR', sans-serif;
	cursor: pointer;
}

button:focus-visible {
	outline: 2px solid black; /* 탭으로 선택된 버튼에만 파란색 테두리 */
}

button span {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
}

.loader {
		width: 50px;
	height: 50px;
	border: 6px solid #ccc;
	border-top: 6px solid #ffffff; /* 회전할 부분 강조 */
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media ( max-width : 767px) {
	#main-content {
		margin-top: 55px; /* 헤더 높이만큼 여백 */
	}
}