@font-face {
	font-family: 'Tenada';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
	font-weight: normal;
	font-display: swap;
}

/* 페이지 배경 & 레이아웃 공통 */
.main-container {
	padding-top: 0;
	background-color: #fffcf8;
}

.content-body {
	overflow: hidden;
}

/* 퀴즈 메인 영역 */
.quiz-main {
	padding-top: 50px;
}

/* 상단 타이틀 */
.top-title {
	text-align: center;
	margin-bottom: 50px;
}

.top-title .title1 {
	font-family: Tenada;
	font-size: 3rem;
	color: var(--brand-orange);
	animation: pulseStrong 0.9s ease-in-out;
	animation-delay: 1s;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.top-title .title2 {
	font-size: 1.2rem;
}

/* Fun Fun Quiz 텍스트 펄스 애니메이션 */
@keyframes pulseStrong {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(0.8);
	}
	60% {
		transform: scale(1.2);
	}
	80% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* 카테고리 리스트 */
.quiz-cat {
	margin: 0;
	padding: 0 0 20px 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	overflow: visible;
}

.quiz-cat li {
	height: 160px;
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
	/*border: 1px solid var(--brand-line-color);*/
	opacity: 0;
	box-shadow: var(--box-shadow);
}

.quiz-cat li:hover {
	box-shadow: 0 0 15px rgba(29, 82, 67, 0.15);
	/*background-color: var(--brand-line-color);*/
	transform: translateY(-3px);
	transition: transform .2s ease-in-out;
}

.quiz-cat li.active {
	/*border-color: var(--brand-orange);*/
}

.quiz-cat .cat {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: row;
	padding-left: 20px;
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 90% 80%;
}

.quiz-cat .cat.hotel {
	background-image: url(../images/quiz/hotel.png);
}
.quiz-cat .cat.trade {
	background-image: url(../images/quiz/trade.png);
}
.quiz-cat .cat.cost {
	background-image: url(../images/quiz/cost.png);
}
.quiz-cat .cat.management {
	background-image: url(../images/quiz/management.png);
}
.quiz-cat .cat.accounting {
	background-image: url(../images/quiz/accounting.png);
}
.quiz-cat .cat.tax {
	background-image: url(../images/quiz/tax.png);
}




.quiz-cat .cat .pic {
	position: absolute;
	top: -120px;
	right: 20%;
	rotate: -45deg;
	width: 100px;
	height: auto;
	box-shadow: -2px -2px 8px rgba(0, 0, 0, .4);
	opacity: .5;
}

.quiz-cat li:hover .cat .pic {
	transform: translateX(-20px);
	transition: transform .4s ease-in-out;
}

.quiz-cat li .icon {
	width: 100px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quiz-cat li .info {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: left;
}

.quiz-cat li .icon span {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.quiz-cat li .icon span svg {
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.3));
	opacity: .7;
}

.quiz-cat li:hover .icon span {
	width: 50px;
	height: 50px;
}

.quiz-cat li:hover .icon span svg {
	opacity: 1;
}

.quiz-cat .info .title {
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--text-emp-color);
}

.quiz-cat .info .desc {
	font-weight: 400;
	font-size: 1rem;
	color: #929292;
}

.quiz-cat li:hover .info .desc {
	/*color: #fff;*/
}

/* 레벨 선택 섹션 기본은 숨김 (JS로 표시) */
.quiz-level {
	display: none;
	padding-top: 50px;
}

/* ===== 레벨 카드 공통 토큰 ===== */
:root {
	--bg: #f4f7fb;
	--text: #111827;
	--muted: #6b7280;
	--card-bg: #ffffff;
	--card-border: rgba(17, 24, 39, .08);
	--ring: rgba(59, 130, 246, .25);
	--shadow: 0 10px 25px rgba(2, 6, 23, .08);
	--radius: 22px;

	--g-green-from: #b5f0cf;
	--g-green-to: #61d4a7;
	--g-blue-from: #cfe3ff;
	--g-blue-to: #7aaaf7;
	--g-vio-from: #eadcff;
	--g-vio-to: #c3a3ff;

	--accent-green: #18a76e;
	--accent-blue: #2563eb;
	--accent-violet: #7c3aed;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1220;
		--text: #e5e7eb;
		--muted: #9ca3af;
		--card-bg: #0f172a;
		--card-border: rgba(148, 163, 184, .12);
		--shadow: 0 16px 40px rgba(0, 0, 0, .35);
	}
}

/* 레벨 카드 그리드 */
.level-deck {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
	padding-bottom: 50px;
}

@media (max-width: 980px) {
	.level-deck {
		grid-template-columns: 1fr;
	}
}

/* 카드 본체 */
.level-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .75)), var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .6, .2, 1), box-shadow .35s;
	backdrop-filter: blur(6px);
	cursor: default;
	padding-bottom: 30px;
	animation: floatIn .6s cubic-bezier(.2, .6, .2, 1) both;
}

.level-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 60px rgba(2, 6, 23, .12);
}

.level-card:nth-child(2) {
	animation-delay: .06s;
}

.level-card:nth-child(3) {
	animation-delay: .12s;
}

/* 카드 헤더 */
.lc-head {
	padding: 28px 28px 20px;
	text-align: center;
	position: relative;
}

.lc-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 120px;
	border-bottom-left-radius: 40% 35%;
	border-bottom-right-radius: 40% 35%;
	filter: blur(24px);
	opacity: .75;
	z-index: 0;
}

/* 필요하면 그라디언트 색상은 여기서 추가 정의해서 사용
   .lc-head--green::before { ... }
   .lc-head--blue::before { ... }
   .lc-head--violet::before { ... }
*/

.lc-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 10px;
	display: grid;
	place-items: center;
	z-index: 1;
	position: relative;
}

.lc-icon svg {
	width: 50px;
	height: 50px;
	fill: currentColor;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.3));
}

.lc-head--green .lc-icon {
	color: var(--accent-green);
}

.lc-head--blue .lc-icon {
	color: var(--accent-blue);
}

.lc-head--violet.lc-head .lc-icon {
	color: var(--accent-violet);
}

.lc-title {
	margin: 8px 0 6px;
	font-size: 22px;
	letter-spacing: -.02em;
	color: var(--text);
	z-index: 1;
	position: relative;
	font-weight: 800;
}

.lc-sub {
	margin: 2px 0 0;
	color: var(--muted);
	font-size: 14px;
	z-index: 1;
	position: relative;
}

/* 난이도 별 별 표시 */
.lc-stars {
	display: inline-flex;
	gap: 4px;
	z-index: 1;
	position: relative;
}

.star {
	width: 16px;
	height: 16px;
	display: inline-block;
	--star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	clip-path: var(--star);
	background: rgba(148, 163, 184, .35);
}

.star--on {
	background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

/* 체크 리스트 */
.lc-list {
	margin: 0;
	padding: 18px 24px;
	list-style: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lc-list li {
	position: relative;
	padding-left: 28px;
	color: var(--text);
	line-height: 1.55;
	background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .2));
	border-radius: 12px;
	border: 1px solid var(--card-border);
	padding-top: 10px;
	padding-bottom: 10px;
}

.lc-list li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: conic-gradient(from 200deg, #10b981, #34d399, #10b981);
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="white" d="M5.5 10.5L1.8 7.2l1.4-1.4 2.3 2.2 4.9-4.8 1.4 1.4z"/></svg>') center/contain no-repeat;
}

/* 카드 등장 애니메이션 */
@keyframes floatIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}



/* ===========================
   모바일 레이아웃 (<= 768px)
   =========================== */
@media (max-width: 768px) {

	/* 상단 여백/폰트 조금 줄이기 */
	.quiz-main {
		padding-top: 50px;
	}

	.top-title {
		margin-bottom: 30px;
	}

	.top-title .title1 {
		font-size: 2.2rem;
	}

	.top-title .title2 {
		font-size: 1rem;
	}

	/* 카테고리 카드: 2열, 간격 축소 */
	.quiz-cat {
		margin-top: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		row-gap: 30px;
	}

	.quiz-cat li {
		height: auto;               /* 내용 높이에 맞게 */
		border-radius: 14px;
		opacity: 1;                 /* 등장 애니메이션 안 쓰려면 */
		border-color: #ccc;
		box-shadow: var(--box-shadow);
		padding-bottom: 10px;
	}

	/* 모바일에서는 배경 이미지 제거 */
	.quiz-cat .cat .pic {
		display: none;
	}

	/* 카드 내 레이아웃: 아이콘 위, 텍스트 아래 세로 정렬 */
	.quiz-cat .cat {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 10px;
		background-size: 45%;
		background-position: center 60%;
		box-sizing: border-box;
	}

	.quiz-cat li .icon {
		width: auto;
		height: auto;
		margin-bottom: 8px;
		display: none;
	}

	.quiz-cat li .icon span {
		width: 36px;
		height: 36px;
	}

	/* 텍스트 가운데 정렬 */
	.quiz-cat li .info {
		flex: 0 0 auto;
		height: 100px;
		/*align-items: center;*/
		/*justify-content: center;*/
		/*text-align: center;*/
	}
	.quiz-cat li .info > div {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.quiz-cat .info .title {
		font-size: 1.1rem;
		margin-bottom: 4px;
		text-align: center;
	}

	.quiz-cat .info .desc {
		font-size: 12px;
		color: #666;
	}

	/* 터치 환경이라 hover 효과는 살짝 완화 */
	.quiz-cat li:hover {
		transform: none;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(29, 82, 67, 0.12);
	}

	.quiz-cat li:hover .info .desc {
		color: #666;
	}

	.quiz-cat li:hover .icon span {
		width: 40px;
		height: 40px;
	}


	/* 레벨 선택 영역 여백 줄이기 */
	.quiz-level {
		padding-top: 0;
	}

	.level-deck {
		grid-template-columns: 1fr;   /* 세로 1열 */
		gap: 12px;                    /* 카드 간격 축소 */
		padding-bottom: 20px;
	}

	.level-card {
		padding-bottom: 10px;
		/* 카드 전체 높이를 줄이기 위해 내부 여백/폰트 축소 */
	}

	/* 헤더 부분 슬림하게 */
	.lc-head {
		padding: 14px 14px 10px;
	}

	.lc-head::before {
		height: 70px;
		filter: blur(16px);
	}

	.lc-icon {
		width: 40px;
		height: 40px;
		margin-bottom: 4px;
	}

	.lc-icon svg {
		width: 32px;
		height: 32px;
	}

	.lc-title {
		font-size: 1.1rem;
		margin: 4px 0 2px;
	}

	.lc-sub {
		font-size: 0.8rem;
	}

	/* 별 아이콘도 조금 작게 */
	.lc-stars {
		gap: 2px;
	}
	.star {
		width: 12px;
		height: 12px;
	}

	/* 리스트 영역 컴팩트하게 */
	.lc-list {
		padding: 10px 12px;
		gap: 6px;
		display: none;
	}

	.lc-list li {
		font-size: 0.85rem;
		padding: 6px 10px 6px 24px;
	}

	/* 만약 푸터(버튼 등)를 쓰게 되면 여기도 슬림하게 */
	.lc-foot {
		padding: 8px 12px 10px;
		font-size: 0.8rem;
	}
}


@media (min-width: 1921px) {

	.quiz-cat li {
		height: 250px;
	}

	.quiz-cat .info .title {
		font-size: 2.2rem;
	}
	.quiz-cat .info .desc {
		font-size: 1.5rem;
	}

}