@charset "utf-8";

.word_learning_text1 {
	text-align: center;
	font-size: 24px;
	font-weight: 200;
	margin-bottom: 20px;
}

.owlWrap {
	height:460px;
}
.owl-carousel {
	height: 460px;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.owl-carousel .owl-stage {
	touch-action: pan-y;
}
.wordImgFrm_1 {
	margin-bottom: 10px;
}
.wordImgFrm_2 {
	text-align: center;
	margin-bottom: 10px;
}
.wordImgFrm_2 .word_1 {
	color: #222222;
	font-size: 30px;
	font-weight: 700;
}
.wordImgFrm_2 .word_2 {
	color: #fdc00f;
	font-size: 24px;
}
.wordImgFrm_3 {
	text-align: center;
}
.wordImgFrm_3 .ex_1 {
	font-size: 16px;
}
.wordImgFrm_3 .ex_2 {
	font-size: 16px;
	color: #828282;
	margin-bottom: 5px;
}
.thumbnail {
	display: flex;
	justify-content: center;
	height: 250px;
}
.thumbnail img{
    border-radius: var(--bs-border-radius-xl);
}
.thumbnail img.portrait {width: 100%; max-width: none; height: auto;}
.thumbnail img.landscape {width: auto; max-width: none; height: 100%;}

.keyboardWrap {
	display: none;
}

.word_item_wrap {
	height: 435px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wordFrm_1 {
	margin-bottom: 10px;
}

.wordFrm_2 {
	text-align: center;
	margin-bottom: 10px;
}

.wordFrm_2 .word_1 {
	color: #222222;
	font-size: 30px;
	font-weight: 700;
}

.wordFrm_2 .word_2 {
	color: #fdc00f;
	font-size: 24px;
}

.wordFrm_3 {
	text-align: center;
}

.wordFrm_3 .ex_1 {
	font-size: 16px;
}

.wordFrm_3 .ex_2 {
	font-size: 16px;
	color: #828282;
	margin-bottom: 5px;
}


#begin_display {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	background: #fff;
	width: 100%;
	height: 530px;
	z-index:99;
}

.exam_title {
	text-align: center;
	font-size: 40px;
	letter-spacing: -1px;
	margin-bottom: 35px;
	color: rgb(51, 51, 51);
	font-weight: bold;
}

.exam_text1 {
	text-align: center;
	font-size: 16px;
	margin-bottom: 50px;
	letter-spacing: -1px;
}
.exam_text2 {
	text-align: center;
	font-size: 16px;
	letter-spacing: -1px;
	margin-bottom: 20px;
	color: #6c6c6c;
}

.exam_input_wrap {
	display:flex;
	justify-content:center;
}

.exam_input_wrap .input-group {
	width: 90px;
}

.examFrm_2 .word_1 {
	color: #222222;
	font-size: 24px;
	text-align: center;
}

.examSet {width:100%; flex:auto;}
.examSet .ok {background:#27ae60;}
.examSet .ok a {color:#fff;}
.examSet .ok .no {color:#fff;}
.examSet .bad {background:#e54d41;}
.examSet .bad a {color:#fff;}
.examSet .bad .no {color:#fff;}

.examBtnWrap {border:1px solid #c5c5c5; margin:7px 0; height:56px; display:flex; border-radius: var(--bs-border-radius-xl); transition: transform 0.15s ease, box-shadow 0.15s ease;}
.examBtnWrap:active {transform: scale(0.97);}
.examBtnWrap a {display:flex; width:100%; color:#000; text-decoration: none;}
.examBtnWrap .no {width:77px; display:flex; justify-content:center; align-items:center; color:#000; font-size:18px;}
.examBtnWrap .text {display:flex; flex:1; justify-content:center; align-items:center; padding-left:10px; font-size:16px;}

.examButtonWrap {text-align:center;}

.resultButtonWrap {
	display: none;
}

.progress-bar-wrap{
	width:100%;
	height:10px;
	background:#dcdcdc;
	border-radius:10px;
	margin-top:-10px;
	margin-bottom:15px;
}

.progress-bar {
	width:0%;
	height:10px;
	background:linear-gradient(to right,rgb(76,217,105),rgb(90,200,250),rgb(0,132,255),rgb(52,170,220),rgb(88,86,217),rgb(255,45,83));
	margin-top:10px;
	background-size:350px 5px;
	border-radius:10px;
	/*animation:loading 3s ease-in-out forwards;*/
}

.resultWrap {margin:0 auto; margin-top:60px;}
.resultTitle {color: rgb(51, 51, 51); font-size: 40px; text-align:center; font-weight:bold;}
.resultText1 {font-size: 30px; text-align:center; margin-bottom:30px; font-weight:200;}
.resultScore {display:inline-block; font-size:60px; font-weight:bold; letter-spacing:-1px;}
.resultScoreText {font-size:16px; color:#505050;}
.resultText2 {font-size:18px; letter-spacing:-1px;}
.resultScoreWrap {display:flex; flex-wrap:wrap; flex-direction:column; margin-bottom:50px;}

.resultText2 .ok_cnt {font-weight:bold;}
.resultText2 .total_cnt {font-weight:bold;}
.resultTrophyImg {margin: 0 auto;}
.resultTrophyImg img {width: 100%;}

.score_progress_wrap {
	margin: 0 auto;
}

.score_wrap {
	text-align: center;
}

.good_icon, .bad_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -75px;
	margin-left: -75px;
	z-index: 100;
}

.gb_icon_ani {
	-webkit-animation: gb_icon_ani 1.1s steps(20) 1 both;
	animation: gb_icon_ani 1.1s steps(20) 1 both;
}

.gb_icon_ani2 {
	-webkit-animation: gb_icon_ani 0.6s steps(20) 1 both;
	animation: gb_icon_ani 0.6s steps(20) 1 both;
}

@-webkit-keyframes gb_icon_ani {
	0% {opacity:0}
	20% {-webkit-opacity:1.0; -webkit-transform:translate(0px, -40px);}
	80% {-webkit-opacity:1.0; -webkit-transform:translate(0px, -40px);}
	100% {-webkit-opacity:0;  -webkit-transform:translate(0px, -40px);}
}

@keyframes gb_icon_ani {
	0% {opacity:0;}
	20% {opacity:1.0; transform:translate(0px, -40px);}
	80% {opacity:1.0; transform:translate(0px, -40px);}
	100% {opacity:0; transform:translate(0px, -40px);}
}

/* ============================================
   MOBILE PHONE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
	.owlWrap {
		height: calc(100vh - 200px);
		min-height: 360px;
		max-height: 500px;
	}
	.owl-carousel {
		height: calc(100vh - 200px);
		min-height: 360px;
		max-height: 500px;
	}
	.word_item_wrap {
		height: calc(100vh - 220px);
		min-height: 340px;
		max-height: 480px;
		padding: 16px 8px;
	}

	/* Enlarged word text for small phones */
	.wordFrm_2 .word_1,
	.wordImgFrm_2 .word_1 {
		font-size: 42px;
		line-height: 1.2;
		font-weight: 800;
	}
	.wordFrm_2 .word_2,
	.wordImgFrm_2 .word_2 {
		font-size: 26px;
		line-height: 1.3;
	}
	.wordFrm_3 .ex_1,
	.wordImgFrm_3 .ex_1 {
		font-size: 15px;
		line-height: 1.5;
		padding: 0 8px;
	}
	.wordFrm_3 .ex_2,
	.wordImgFrm_3 .ex_2 {
		font-size: 14px;
		line-height: 1.5;
		padding: 0 8px;
	}

	.thumbnail {
		height: 180px;
	}

	/* Exam: larger touch targets */
	.examBtnWrap {
		height: 56px;
		margin: 6px 0;
		border-radius: 14px;
	}
	.examBtnWrap .text {
		font-size: 16px;
		padding: 0 12px;
	}
	.examBtnWrap .no {
		width: 50px;
		font-size: 16px;
	}
	.examFrm_2 .word_1 {
		font-size: 32px;
	}
	#exam_display {
		padding: 0 4px;
	}

	/* Start screen */
	#begin_display {
		height: calc(100vh - 200px);
		min-height: 300px;
		padding: 20px;
	}
	.exam_title {
		font-size: 28px;
		margin-bottom: 20px;
	}
	.word_learning_text1 {
		font-size: 18px;
	}

	/* Results */
	.resultTitle {
		font-size: 28px;
	}
	.resultText1 {
		font-size: 22px;
	}
	.resultScore {
		font-size: 48px;
	}

	/* Control buttons — stacked rows */
	#learning_display .text-center .btn-sm {
		padding: 8px 14px;
		font-size: 13px;
		min-height: 40px;
		border-radius: 10px;
	}

	/* Bottom nav spacing */
	body.has-bottom-nav .p_container {
		padding-bottom: 80px;
	}

	/* Progress bar thicker on mobile */
	.progress-bar-wrap {
		height: 6px;
		margin-top: -6px;
		margin-bottom: 12px;
	}
}

/* ============================================
   TABLET (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
	.owlWrap {
		height: calc(100vh - 180px);
		min-height: 400px;
		max-height: 520px;
	}
	.owl-carousel {
		height: calc(100vh - 180px);
		min-height: 400px;
		max-height: 520px;
	}
	.word_item_wrap {
		height: calc(100vh - 200px);
		min-height: 380px;
		max-height: 500px;
	}

	.wordFrm_2 .word_1,
	.wordImgFrm_2 .word_1 {
		font-size: 50px;
		font-weight: 800;
	}
	.wordFrm_2 .word_2,
	.wordImgFrm_2 .word_2 {
		font-size: 30px;
	}
	.wordFrm_3 .ex_1,
	.wordImgFrm_3 .ex_1 {
		font-size: 18px;
	}
	.wordFrm_3 .ex_2,
	.wordImgFrm_3 .ex_2 {
		font-size: 17px;
	}

	.thumbnail {
		height: 220px;
	}

	/* Exam buttons */
	.examBtnWrap {
		height: 56px;
		border-radius: 14px;
	}
	.examBtnWrap .text {
		font-size: 17px;
	}
	.examFrm_2 .word_1 {
		font-size: 38px;
	}

	#begin_display {
		height: calc(100vh - 180px);
		min-height: 350px;
	}
	.exam_title {
		font-size: 36px;
	}
	.word_learning_text1 {
		font-size: 22px;
	}

	body.has-bottom-nav .p_container {
		padding-bottom: 80px;
	}
}

/* ============================================
   SMALL MOBILE + TABLET (max-width: 991px)
   shared mobile rules
   ============================================ */
@media (max-width: 991px) {
	/* Owl carousel touch improvements */
	.owl-carousel .owl-stage-outer {
		overflow: visible;
	}
	.owl-carousel .owl-item {
		-webkit-tap-highlight-color: transparent;
	}

	/* Exam answer feedback animations */
	.examBtnWrap.answer-correct {
		background: #e8f5e9;
		border-color: #4caf50;
		transform: scale(1.02);
		box-shadow: 0 2px 8px rgba(76,175,80,0.3);
	}
	.examBtnWrap.answer-wrong {
		animation: shake-answer 0.4s ease;
		background: #ffebee;
		border-color: #ef5350;
	}
	@keyframes shake-answer {
		0%, 100% { transform: translateX(0); }
		20% { transform: translateX(-8px); }
		40% { transform: translateX(8px); }
		60% { transform: translateX(-6px); }
		80% { transform: translateX(6px); }
	}

	/* Confetti for correct answers */
	.exam-confetti {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 9999;
	}
	.exam-confetti-particle {
		position: absolute;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		animation: confetti-fall 1s ease-out forwards;
	}
	@keyframes confetti-fall {
		0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
		100% { opacity: 0; transform: translateY(200px) rotate(720deg) scale(0.3); }
	}
}

/* PC */
@media (min-width: 992px) {
	#begin_display {
		width: 100%;
		height: 610px;
	}

	.owlWrap {height:460px; margin-bottom: 24px;}
	.owl-carousel {height:460px; overflow:hidden;}
	.word_learning_text1 {
		text-align: center; 
		font-size: 30px; 
		font-weight: 200;
		margin-bottom: 20px;
	}
	.word_item {background:#fff; height:460px; display:flex; flex-wrap:wrap; flex-direction:row;}
	.wordImgFrm_1 {flex:auto; width:50%; display:flex; justify-content:center; align-items:center; height:310px;}
	.wordImgFrm_2 {flex:auto; width:50%; display:flex; justify-content:center; align-items:center; flex-direction:column;}
	.wordImgFrm_2 .word_1 {color:#222222; font-size:75px;}
	.wordImgFrm_2 .word_2 {color:#fdc00f; font-size:40px;}
	.wordImgFrm_3 {flex:auto; height:150px; display:flex; justify-content:center; align-items:center; flex-direction:column;}
	.wordImgFrm_3 .ex_1 {font-size:24px;}
	.wordImgFrm_3 .ex_2 {font-size:20px; color:#828282;}
	.wordImgFrm_4 {flex:auto; height:150px; display:flex; justify-content:center; align-items:center;  flex-direction:row;}

	.keyboardWrap {width:1000px; margin:0 auto; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; margin-top:20px;}
	.keyboardInfoWrap {display:flex; align-items:center;}
	.keyboardInfoWrap .text {display:flex; align-items:center; margin-left:5px; font-weight:bold;}
	.keyboardGuideWrap {display:flex; align-items:center;}
	.keyboardKeyWrap {width:30px; height:30px; background:#fff; display:flex; justify-content:center; align-items:center; color:#737373; border:1px solid #ababab; border-radius:5px; box-shadow: 1px 1px 3px -1px grey; }
	.keyboardKeyText {margin-left:5px;}

	.wordFrm_2 {display:flex; height:310px; justify-content:center; align-items:center; flex-direction:column; margin: 0;}
	.wordFrm_2 .word_1 {color:#222222; font-size:75px;}
	.wordFrm_2 .word_2 {color:#fdc00f; font-size:40px;}
	.wordFrm_3 {display:flex; height:150px; justify-content:center; align-items:center; flex-direction:column;}
	.wordFrm_3 .ex_1 {font-size:26px;}
	.wordFrm_3 .ex_2 {font-size:22px; color:#828282;}


	.exam_title {
		text-align: center;
		font-size: 64px;
		letter-spacing: -1px;
		margin-bottom: 35px;
		color: rgb(51, 51, 51);
		font-weight: bold;
	}

	.exam_text1 {
		text-align: center;
		font-size: 18px;
		margin-bottom: 50px;
		letter-spacing: -1px;
	}
	.exam_text2 {
		text-align: center;
		font-size: 18px;
		letter-spacing: -1px;
		margin-bottom: 20px;
		color: #6c6c6c;
	}

	.examWrap {/*height:576px;*/}
	#exam_display {position: relative; height: 515px;}

	.examInputWrap .cnt {width:50px; height:25px; font-size:18px; border-radius:5px; border:1px solid #d3d3d3; padding:3px; text-align:center;}
	.examInputWrap .cntText {font-size:16px;}
	.examButtonWrap {text-align:center;}
	.examSet {width:50%; flex:auto;}
	.examSet .ok {background:#27ae60;}
	.examSet .ok a {color:#fff;}
	.examSet .ok .no {color:#fff;}
	.examSet .bad {background:#e54d41;}
	.examSet .bad a {color:#fff;}
	.examSet .bad .no {color:#fff;}

	.examBtnWrap {border:1px solid #c5c5c5; margin:5px 15px 5px 15px; height:45px; display:flex; border-radius:5px;}
	.examBtnWrap a {display:flex; width:100%; color:#000;}
	.examBtnWrap .no {width:77px; display:flex; justify-content:center; align-items:center; color:#000; font-size:18px;}
	.examBtnWrap .text {display:flex; flex:1; justify-content:center; align-items:center; padding-left:10px; font-size:16px;}

	.examStartButtonWrap {display:inline-block; background:#cb3026; padding-bottom:5px; border-radius:5px;}
	.examStartButton {display:inline-block; background:#e54d41; border-radius:5px; font-size:16px; font-weight:bold;}
	.examStartButton a {display:block; padding:15px; color:#fff;}

	.examAnswerButtonWrap {display:inline-block; background:#cb3026; padding-bottom:5px; border-radius:5px;}
	.examAnswerButton {display:inline-block; background:#e54d41; border-radius:5px; font-size:16px; font-weight:bold; border-radius:5px;}
	.examAnswerButton a {display:block; padding:10px; color:#fff;}

	.examSubmitButtonWrap {display:inline-block; background:#cb3026; padding-bottom:5px; border-radius:5px;}
	.examSubmitButton {display:inline-block; background:#e54d41; border-radius:5px; font-size:16px; font-weight:bold;}
	.examSubmitButton a {display:flex; justify-content:center; align-items:center; height:35px; color:#fff; padding:0 10px 0 10px;}

	.examSubmitButtonWrap2 {display:inline-block; background:#00957e; padding-bottom:5px; border-radius:5px;}
	.examSubmitButton2 {display:inline-block; background:#00ac92; border-radius:5px; font-size:16px; font-weight:bold;}
	.examSubmitButton2 a {display:flex; justify-content:center; align-items:center; height:35px; color:#fff; padding:0 10px 0 10px;}

	.examFrm {width:850px; display:flex; flex-wrap:wrap; flex-direction:row; margin:0 auto; margin-top:10px; margin-bottom:10px;}
	.examFrm_1 {flex:auto; width:50%; display:flex; justify-content:center; align-items:center; height:290px;}
	.examFrm_2 {flex:auto; width:50%; display:flex; justify-content:center; align-items:center; flex-direction:column;}
	.examFrm_2 .word_1 {color:#222222; font-size:50px;}

	.examFrmMid {width:850px; display:flex; flex-wrap:wrap; flex-direction:row; margin:0 auto; margin-bottom:10px;}
	.examFrmBottom {width:850px; display:flex; flex-wrap:wrap; flex-direction:row; margin:0 auto; justify-content:center; align-items:center;}



	.resultWrap {width:800px; margin:0 auto; margin-top:60px;}
	.resultTitle {color: rgb(51, 51, 51); font-size:64px; text-align:center; font-weight:bold;}
	.resultText1 {font-size: 64px; text-align:center; margin-bottom:30px; font-weight:200;}
	.resultScore {display:inline-block; font-size:60px; font-weight:bold; letter-spacing:-1px;}
	.resultScoreText {font-size:16px; color:#505050;}
	.resultText2 {font-size:18px; letter-spacing:-1px;}
	.resultButtonWrap {display:flex; justify-content:center; align-items:center;}
	.resultScoreWrap {display:flex; flex-wrap:wrap; flex-direction:row; margin-bottom:50px; justify-content:center;}

	.resultText2 .ok_cnt {font-weight:bold;}
	.resultText2 .total_cnt {font-weight:bold;}
	.resultTrophyImg {height:168px; margin: 0; margin-right: 40px;}

	.score_progress_wrap {
		margin: 0;
	}

	.score_wrap {
		text-align: left;
	}
}