@charset "utf-8";

/*
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/earlyaccess/jejugothic.css);
*/

@font-face {
	font-family: 'Jeju Gothic';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/JejuGothic-Regular.woff2?wlcache=20261004-1) format('woff2')
}

@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/nanumgothic.woff2?wlcache=20261004-1) format('woff2')
}

@font-face
{
	font-family:'Youth';
	font-style:normal;
	font-weight:400;
 	src: url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kywa/Youth/Youth.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kywa/Youth/Youth.woff') format('woff');
}

@font-face 
{
    font-family: 'Pop';
    src: url('../fonts/ONE Mobile POP.ttf?wlcache=20261004-1') format('truetype'),
         url('../fonts/ONE Mobile POP OTF.otf?wlcache=20261004-1') format('opentype');
}

*{font-family: 'Jeju Gothic', 'Youth', 'Noto Sans KR', MD-gullim, 'Nanum Gothic';}

html,
body 
{ 
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}

/* Fit the classroom chrome without changing tablet proportions.
   Compact overrides apply only on short phone landscapes. */
body.lesson-shell {
	display:flex;
	flex-direction:column;
}
body.lesson-shell > .lesson-top {
	flex:0 0 40px;
	height:40px;
}
body.lesson-shell > .lesson-work,
body.lesson-shell > [data-name=contsDiv] {
	flex:1 1 auto;
	min-height:0;
}
body.lesson-shell > .lesson-bottom,
body.lesson-shell > [data-name=pageDiv] {
	flex:0 0 80px;
	min-height:80px;
}
#playBtn {
	object-fit:contain !important;
}
.rec img {
	max-width:70%;
	max-height:70%;
	object-fit:contain;
}

@media (max-height: 500px) {
	body.lesson-shell > .lesson-top {
		height:40px !important;
		width:100% !important;
	}
	body.lesson-shell > .lesson-work,
	body.lesson-shell > [data-name=contsDiv] {
		height:auto !important;
		width:100% !important;
		margin:0 !important;
	}
	body.lesson-shell > .lesson-bottom,
	body.lesson-shell > [data-name=pageDiv] {
		flex:0 0 72px;
		height:72px !important;
		min-height:72px;
		width:100% !important;
	}
	body.lesson-shell span[data-id=play] {
		flex:0 0 40px;
		width:40px;
		height:40px;
		font-size:28px !important;
		margin:0 10px 0 0 !important;
	}
	body.lesson-shell span[data-id=play] i {
		font-size:28px !important;
		margin:0 !important;
	}
	body.lesson-shell [data-name=speed][data-id=speed] {
		min-width:0;
		overflow:hidden;
	}
}

div, input, select, textarea 
{
   	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

input, select, textarea{width:100%;height:36px;border:1px solid #367C81;border-radius:4px;color:#000000;background:#ffffff;text-align:center;}
input:focus{border:1px solid orange !important;outline:none;}
select:focus, textarea:focus{border:1px solid red !important;outline:none;}
select option{padding:5px 0 !important;}

ul, ol, li 
{
    list-style: none;
    padding: 0;
    margin: 0;    
}
		
p{margin: 0;}

div, p{user-select:none;}	
	
.rectBtn
{
	width:80px;height:100%;border:1px solid #1D1752;border-radius:4px;color:#000000;background:white;cursor:pointer;padding:0;
	display:flex;justify-content:center;align-items:center;
}
.rectBtn:hover {border:1px solid #367C81;background:#f0f0f0;}
.rectBtn:active {border:1px solid navy;background:#d0d0d0;}

.roundBtn 
{
	width:80px;height:90%;border:none;color:#ffffff;background:#367C81;cursor:pointer;padding:0;border-radius:20px;
	display:flex;justify-content:center;align-items:center;
}
.roundBtn:hover {background-color:orange !important;}
.roundBtn:active {background-color:darkorange !important;}
    		
.unselectable 
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

::-webkit-scrollbar{width: 0;}	
::-webkit-scrollbar-thumb {background: #ffffff;}