body {
		display: flex;
		flex-direction: column;
		/*height: 100vh;*/
		margin: 0;
		font-family: Arial, sans-serif;
	}
	.header {
		position: fixed;
		display: flex;
		flex : 1 0 auto;
		flex-grow: 1;
		width:100%;
		align-items: center;
		justify-content: space-between;
		/*
		background-color: #0099cc;
		background-color: #9999cc;
		background-color: #c84220;
		background-color: #2a80f4;
		color: white;
		*/
		
		background-color: #121212;
		color: #fff;
		z-index:80;
		padding:7px 0px;
		/*border-bottom:solid 1px #474747;*/
	}
	.header .gnb { 
		flex-basis: auto;
		display: flex;
		align-items: center;
		gap: 5px;
		padding:1px 20px;
		margin:0px;

	}
	.header .gnb a i { 
		color: #fff;
		margin-right:10px;
	}
	.header h2 {
		margin:0px;
		padding: 0px;
		font-family: "³ª´®½ºÄù¾î", "NanumSquare", "verdana" , sans-serif;
		font-size:18px;
		font-weight:600;
	}
	.header h2 a {
		color: #fff;
	}
	.header h2 span.site_ver {	
		font-size:14px;
		font-weight:300;
		color:#3e9eff;
	}
	/*.header h2 img {width:100%;}*/

	/*
	.header h2 .logo { 
		width:120px; 
		height:56px; 		
		display: inline-block;
		vertical-align: middle;
	}
	.header h2 .logo a {
		display: block;
		text-indent: -99999px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background: url(../img/classmon_logo.png) no-repeat center / 100%;
	}
	*/

	.header h2 .logo { 
		/*
		width:124px; 
		height:87px;

		width:57px; 
		height:40px;
		*/
		/*
		width:64px; 
		height:45px;
		*/
	
		width:45px; 
		height:45px;
		display: inline-block;
		vertical-align: middle;
		margin-top:5px;
	}
	.gnb img.imgLogo {
		width:45px;
	}
	.gnb .site_ename {
		font-size:12px;
		font-weight:300;
		letter-spacing :1.2px;
	}
	/*
	.header h2 .logo a {
		display: block;
		text-indent: -99999px;
		overflow: hidden;
		width: 90%;
		height: 90%;
		background: url(../img/logo_mon.png) no-repeat center / 100%;
	}
	*/
	/*
	.header h2 .logo a {
		display: block;
		text-indent: -99999px;
		overflow: hidden;
		width: 90%;
		height: 90%;
		background: url(../img/logo_mon2.png) no-repeat center / 100%;
	}
	*/

	.header .left, .header .right {
		display: flex;
		align-items: center;
		gap: 15px 26px;
		margin-right:20px;
	}
	/*
	.header .left a, .header .right a {
		color:#d4d4d4;
	}
	*/
	
	.header .right a.login-text i {
		display:none;
	}
	.header .right a span {
		display:block;
	}
	a.login-text {
		color: #333;
		font-size:14px;
		font-weight:400;
		background: #fff;
		text-decoration: none;
		border-radius: 20px;
		padding:8px 18px;	
	}	
	a.login-text:hover {
		background:#7d95a6;
		color: #fff;
	}
	.pointer {cursor:pointer;}


	.search-bar {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.search-input-wrapper {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.search-input-wrapper input {
		width: 100%;
		padding: 10px 0px 10px 16px;
		padding-right:3em;
		border-radius: 16px;
		border: solid 1px #29343c;
		background:#29343c;
		color: #ebebeb;
		box-sizing: border-box;
	}

	.search-input-wrapper .btn-search {
		position: absolute;
		right: 0.2em;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		margin-right:8px;
		font-size: 16px;
		color: #bebebe;
		cursor: pointer;
		line-height: 1;

	}
	.search-input-wrapper .btn-close {
		display:none;
	}
	.search-input-wrapper .btn-close:hover {
		background-color: #f5f5f5;
		color:#333;
	}

	.search-input-wrapper .ad-search {
		display: none;
	}

	.search-bar .icon-search {
		display: none;
	}

	/* left menu */
	.sidebar {
		/*border-top:solid 1px #ddd;*/

		width: 240px;
		border-radius: 16px;
		color: #d4d4d4;
		background-color: #121212;
		/*
		padding: 10px 10px 10px;
		*/
		margin:0px 0px 0 10px;
		position: fixed;
		left: 0;
		/*top: 66px;*/
		top: 63px;
		transition: transform 0.3s ease;
		z-index:80;
		/*¸ð¹ÙÀÏ¿¡¼­ dvh »ç¿ë*/
		max-height: calc(100dvh - 66px); 
		/*max-height: 100dvh;	*/
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	#sidebar::-webkit-scrollbar {
	  width: 6px;
	}

	#sidebar::-webkit-scrollbar-thumb {
	  background-color: rgba(0, 0, 0, 0.2);
	  border-radius: 3px;
	}

	#sidebar::-webkit-scrollbar-track {
	  background: transparent;
	}
	.sidebar.hidden {
		transform: translateX(-100%);
	}
	.sidebar ul { 
		border-radius: 16px;
		padding: 10px 10px 10px;
		background-color: #272727;
		box-sizing: border-box;
	}
	.sidebar ul.line { 
		/*border-top:solid 1px #474747; */
		/*padding-top:5px; */
		margin-top:5px;
	}
	.sidebar ul li {
		padding:10px 10px;
		font-size:14px;
	}
	.sidebar ul li a {
		color: #ebebeb;
	}
	.sidebar ul li:hover {
		background:#353535;
		border-radius: 8px;
	}
	.sidebar ul li.menu-name:hover {
		background:none;
	}
	.sidebar ul li.submenu-name {
		color:#c7c7c7;
		padding-left:28px;
	}
	.sidebar ul li label {
		font-size:15px;
		font-weight:500;
		color:#fff;
	}
	.sidebar ul li label span {
		font-size:14px;
		font-weight:400;
		color: #ebebeb;
	}
	.sidebar ul:last-child {
		padding-bottom:10px;
	}
	.sidebar ul li i {
		width:20px;
	}
	/*
	.sidebar .sidebar-footer {
		border-top:solid 1px #474747;
		color: #6f6f6f;
		margin-top:14px;
		padding:10px 0px;
		font-size:12px;
	}
	*/
	.content-wrapper {
		display: flex;
		flex: 1;
		position: relative;
	}
	/*
	.content-container {
		display: flex;
		flex: 1;
		margin-left: 220px;
		margin-top: 70px;
		border-radius: 10px;
		box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.1);
		transition: margin-left 0.3s ease;
	}
	*/

	.page-title {
		font-size: 22px;
		font-weight: 500;
		margin: 30px 26px 10px;
		color:#fff;
		box-sizing: border-box;
	}
	.page-title span {
		font-size: 16px;
		font-weight: 400;
	}
	.content-container {
		display: flex;
		flex: 1;
		margin-left: 260px;
		margin-top: 62px;
		/*border-left:solid 1px #474747; */
		background-color: #272727;
		border-radius: 16px;
		width: calc(100% - 260px);
		/*box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.1);*/
		flex-direction: column;
		transition: margin-left 0.3s ease;
		box-sizing: border-box;
		padding-bottom:30px;
		margin-right:10px;
	}
	.content-container.expanded {
		margin-left: 0;
	}
	
	.myinfo-menu {
		margin-top: 20px;
		margin-bottom: 20px;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.myinfo-menu h3 {
		margin-top:10px;
		margin-left:20px;
		margin-right:10px;
		display:inline-block;
		/*background:#eee;*/
		width:80px;
		height:80px;
		border-radius: 50%;
		float:left;
		background:#a4a4a4;
	}
		
	.profile-box {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  
	} 
	.user-photo {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		object-fit: cover;
	}
	
	.myinfo-menu h3 i {
		display: flex;
		align-items: center;
		justify-content: center;
		padding:14px;
		font-size:46px; 
		color:#ebebeb;
	}
	.myinfo-menu ul {
		padding: 0px;
		margin: 10px 0px;
		white-space: nowrap;
	}
	.myinfo-menu ul li {
		list-style: none;
		padding: 2px 10px;
		flex-shrink: 0; /* ÁÙ¾îµéÁö ¾Êµµ·Ï */
		font-size:14px; 
		line-height:24px;
	}
	.myinfo-menu ul li strong {
		font-size:16px; 
	}

	.myinfo-menu ul li a span {
		cursor: pointer;
		font-size:13px;
		border-radius: 16px;
		padding:4px 10px;
	}

	.tab-menu {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	.tab-menu ul {
		display: flex;
		padding: 6px;
		border-radius: 8px;
		margin: 0;
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: nowrap;
		scrollbar-width: thin;
		scrollbar-color: #243841 transparent;
	}
	.tab-menu ul::-webkit-scrollbar {
		height: 1px;
	}
	.tab-menu ul::-webkit-scrollbar-thumb {
		background-color: #243841;
		border-radius: 5px;
	}

	.tab-menu ul::-webkit-scrollbar-track {
		background: transparent;
	}
	.tab-menu ul li {
		list-style: none;
		padding: 6px 12px;
		cursor: pointer;
		border-radius: 10px;
		font-size:14px;
		flex-shrink: 0;
		margin:0px 10px;
	}
	.tab-menu ul li a {
		color: #ebebeb;
	}
	.tab-menu ul li:hover {
		background-color: #3e505b;
		color: #ebebeb;
	}
	.tab-menu ul li.active {
		background-color: #556d7b;
		color: #333;
	}
	.tab-menu ul li.active a {
		color: #fff;
	}


	/* ¹ÝÀÀÇü ó¸® */
	@media (max-width: 768px) {



		.header .gnb { 
			padding:2.5px 10px;

		}
		.header h2 a {
			font-size:15px;
			font-weight:600;
		}
		.header h2 span.site_ver {	
			font-size:12px;
		}

		.tab-menu {
			padding-bottom: 5px;
			margin:0px 10px;
		}

		.tab-menu ul {
			display: flex;
			overflow-x: auto;
			white-space: nowrap;
			padding: 5px 2px;
			flex-wrap: nowrap;
		}

		.tab-menu ul li {
			padding: 8px 12px;
			font-size: 13px;
			margin:0px 3px;
		}


		.search-input-wrapper {
			width: 90vw;
		}
		.search-input-wrapper input {
			width: 96%;
			padding-right:3em;
		}
		.search-input-wrapper .btn-search {
			margin-right: 1.6em;
		}
		.search-input-wrapper .btn-close {
			display: inline-block;
			position: absolute;
			margin-top:6px;
			right: 10px;
			background: none;
			border: none;
			padding: 0px 5px;
			width:24px;
			height:24px;
			border-radius: 24px;
			font-size: 16px;
			color: #ebebeb;
			cursor: pointer;
			line-height: 1;
		}
	}
	@media (max-width: 470px) {
		.search-input-wrapper input {
			width: 94%;
			padding-right:3em;
		}
		.search-input-wrapper .btn-close {
			right: 5px;
		}
	}
	@media (max-width: 470px) {
		.search-input-wrapper input {
			width: 92%;
			padding-right:3em;
		}
	}


	
	.learn-menu {
		margin: 10px 10px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	.learn-menu ul {
		display: flex;
		padding: 6px;
		border-radius: 8px;
		margin: 0;
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: nowrap;
		scrollbar-width: thin;
		scrollbar-color: #243841 transparent;
	}
	.learn-menu ul::-webkit-scrollbar {
		height: 1px;
	}
	.learn-menu ul::-webkit-scrollbar-thumb {
		background-color: #243841;
		border-radius: 5px;
	}

	.learn-menu ul::-webkit-scrollbar-track {
		background: transparent;
	}
	.learn-menu ul li {
		list-style: none;
		cursor: pointer;
		font-size:14px;
		flex-shrink: 0;
		margin:0px 10px;
		border-radius: 26px;
		padding: 8px 14px;
		background-color: #363636;
	}
	.learn-menu ul li a {
		color: #ebebeb;
	}
	.learn-menu ul li:hover {
		background-color: #738e9f;
		color: #ebebeb;
	}
	.learn-menu ul li.active {
		background-color: #556d7b;
		color: #333;
	}
	.learn-menu ul li.active a {
		color: #fff;
	}
	@media (max-width: 768px) {

		.learn-menu {
			padding-bottom: 5px;
			margin:0px 10px;
		}

		.learn-menu ul {
			display: flex;
			overflow-x: auto;
			white-space: nowrap;
			padding: 5px 2px;
			flex-wrap: nowrap;
		}

		.learn-menu ul li {
			padding: 8px 12px;
			font-size: 13px;
			margin:0px 3px;
		}
	}
	




	.main-content {
		flex: 1;
		background-color: #272727;
		padding: 20px;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}
	/*
	.video-card {
		vertical-align:top;
		background-color: white;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-height:230px;
	}
	*/
	.video-card {
		vertical-align:top;
		border-radius: 8px;
		max-height:264px;
		background-color: #243841;
		padding: 10px;
	}
	.video-card:hover {
		/*transform: scale(1.02);*/
	}
	
	.video-thumbnail {
		position: relative;
		background-color: #ccc;
		height: 140px;
		border-radius: 4px;
		box-sizing: border-box;
	}
	.video-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* ºñÀ²À» À¯ÁöÇϸ鼭 ²Ë ä¿ì±â */
		border-radius: 4px;
		/*transition: all 0.3s ease-out;*/
	}
	.video-thumbnail img:hover {
		/*transform: scale(1.1);*/
	}
	.video-thumbnail .runTime {
		font-size:11px; 
		padding:2px 5px;  
		background-color : rgb(0,0,0); opacity : 0.7;
		/*background: transparent;*/
		color:#fff;
		border-radius:5px;
		position: relative; 
		display:inline-block;
		float:right;
		right:5px; 
		bottom: 27px; 
		font-weight:500;
	}
	.video-thumbnail .lang {
		position: absolute;
		top: 5px;
		left: 5px;
		font-size: 11px;
		padding: 2px 5px;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 5px;
	}
	
	.video-thumbnail .level {
		position: absolute;
		bottom: 5px;
		left: 5px;
		/*
		background:#ff0066; 
		color:#fff;
		*/
		padding:4px 8px;
		font-size:11px;
		border-radius: 8px;
	}
	.video-thumbnail .level.beginner {
		background:#ff33ff; 
		color:#fff;
	}
	.video-thumbnail .level.Intermediate1 {
		background:#ff6600; 
		color:#fff;
	}
	.video-thumbnail .level.Intermediate2 {
		background:#ff0066; 
		color:#fff;
	}
	.video-thumbnail .level.Advanced {
		background:#cc0033; 
		color:#fff;
	}
	.video-thumbnail .shorts {
		position: absolute;
		top: 5px;
		right: 5px;
		background:#0066cc; 
		color:#fff;
		padding:4px 8px;
		font-size:11px;
		border-radius: 8px;
	}
	.video-title-wrap {
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.video-title {
		flex: 1;
		font-size: 14px;
		font-weight: 500;
		padding-right: 10px;
	}
	.video-title a {
		color:#ebebeb;
	}

	.video-menu {
		position: relative;
		margin-top:-6px;
		margin-right:-5px;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 32px;
		transition: background-color 0.2s ease;
	}

	.video-menu:hover {
		background-color: #f5f5f5;
	}

	.video-menu .menu-content {
		color: #cfcfcf;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.video-menu .menu-content:hover {
		color: #666;
	}

	.video-menu .menu-content i {
		font-size: 20px;
		pointer-events: none; /* ¾ÆÀÌÄܸ¸ Ŭ¸¯ ¸·°í Àüü ¿µ¿ª Ŭ¸¯ °¡´ÉÇÏ°Ô */
	}
	/*
	.video-title {
		vertical-align:top;
		margin-top: 10px;
		height:50px;
	}
	.video-title a {
		font-size: 14px;
		font-weight: bold;
		
	}
	.video-title a:hover {
		font-weight: bold;
		color:#2a80f4;
		
	}
	*/
	.video-channel {
		font-size: 13px;
		font-weight:400;
		color: #afafaf;
		margin:4px 0px;
	}
	.video-count {
		font-size: 13px;
		color: gray;
		margin:4px 0px;
	}
	.video-bottom {display:block;}
	.video-bottom ul li {display:inline-block; float:none; }
	.video-bottom ul li.video-public-Y {
		margin-top:5px;
		margin-bottom:5px;
		font-size: 11px;
		color:#fff;
		background:#0099cc;
		padding:4px 10px;
		border-radius: 4px;
	}
	.video-bottom ul li.video-public-N {
		margin-top:5px;
		margin-bottom:5px;
		font-size: 11px;
		color:#333;
		background:#c0c0c0;
		padding:4px 10px;
		border-radius: 4px;
	}
	.video-bottom ul li.video-quiz {
		margin-top:5px;
		margin-bottom:5px;
	}
	.video-bottom ul li.video-quiz a {
		font-size: 11px;
		color:#fff;
		background:#2a80f4;
		padding:4px 10px;
		border-radius: 4px;
	}
	.video-bottom ul li.video-quiz a:hover {
		color:#ffff00;
		background:#d61616;
	}
	/*
	.video-bottom ul li.video-menu {
		position: relative;
		display:block;
		text-align:right;
		right:0px;
		border-radius: 50%;
		width:30px;
		height:30px;
		margin-top:-95px;
	}
	.video-bottom ul li.video-menu i {
		font-size:18px;
	}
	*/
	.video-bottom ul li.video-menu a.menu-content {
		position: relative; 
		display:inline-block;
		right:0px; 
		bottom:0px; 
		padding:10px;
		border-radius:10px;
		font-size:16px;
		color:#7c7c7c;
	}

	.sidebar-overlay {
		display: none;
	}
	
	.button-menu {
		display:none;
	}

	@media (max-width: 768px) {
	
		.header h2 {
			font-weight:500;
			font-size:18px;
		}

		.left, .header .right {
			gap: 7px 26px;
		}
		
		.search-input-wrapper {
			display: none;
			position: absolute;
			padding: 10px 16px;
			background: #1d1d1d;
			
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			z-index: 100;
			box-shadow: 0 2px 6px rgba(0,0,0,0.2);
			margin-top:0px;
			box-sizing: border-box;
		}
		.search-input-wrapper input {
			border: solid 1px #29343c;
			color:#ebebeb;
		}
		.search-input-wrapper .btn-search {
			right: 28px;
			top: 28px;
		}

		.search-input-wrapper.active {
			display: block;
		}
		.search-input-wrapper .ad-search {
			margin-top:10px;
			display: block;
			text-align:center;
			padding:10px;
			background:#272727;
			border-radius:10px;
		}
		.search-input-wrapper .ad-search a {
			color:#ebebeb;
		}
		.search-input-wrapper .ad-search a.ad-link {
			font-size:12px;
			color:#ebebeb;
			background:#243841;
			padding:8px 10px;
			border-radius:10px;

		}

		.search-bar {
			justify-content: flex-end;
			margin-right:22px;
		}
		.search-bar .icon-search {
			display: block !important;
			color:#d4d4d4;
			font-size:16px;
		}

/*
		.search-bar {
			justify-content: flex-end;
		}
		.search-bar input {
			display: none;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			z-index: 99;
			margin-top:10px;

			border:solid 1px #000;
		}
		.search-bar .btn-search {
			display: none;
			position: absolute;
			top: 100%;
			right: 13%;
			transform: translateX(-50%);
			z-index: 99;
			margin-top:10px;
		}
		.search-bar .btn-search.active {
			display: block;
		}
		.search-bar.active input {
			display: block;
		}
		.search-bar .icon-search {
			display: block;
			text-indent: -16px;
			color:#fff;
		}

*/
		.sidebar {
			display: none;
		}
		.sidebar.hidden {

			display: block;
			transform: translateX(0);

		}


		.content-container {
			margin-left: 0;
		}
		.content-container.expanded {
			/*margin-left: 220px;*/
			margin-left: 0px;
		}

		.sidebar-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1;
		}

		#create-button {display:none;}

		.button-menu {
			display:block;
			position: fixed;
			bottom: 10px;
			right: 10px;
			z-index: 80;
			display: flex;
		}

		.button-menu a {
			display: flex;
			justify-content: center;
			align-items: center;
			padding:10px 10px 10px;
			border: solid 1px #ddd;
			background: #fff;
			border-radius: 50%;
			vertical-align:middle;
			text-decoration: none;
			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
		}

		.button-menu a i {
			font-size: 24px;
			color: #2a80f4;
		}

		.page-title {
			font-size: 18px;
			font-weight: 600;
		}

	}
	
    @media (max-width: 550px) {
		/*
		.header .right {
			gap: 10px !important;
		}
		*/
		.header .right a {
			font-size:12px;
		}
		.header .right a.login-text i {
			display:block;
		}
		.header .right a.login-text span {
			display:none;
		}
	}


	@media (min-width: 480px) {
		.main-content {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	@media (min-width: 768px) {
		.main-content {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	@media (min-width: 1024px) {
		.main-content {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	@media (min-width: 1280px) {
		.main-content {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	@media (min-width: 1280px) {
		.main-content {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	@media (min-width: 1360px) {
		.main-content {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	@media (min-width: 1400px) {
		.main-content {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	@media (min-width: 1600px) {
		.main-content {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	@media (min-width: 1792px) {
		.main-content {
			grid-template-columns: repeat(6, 1fr);
		}
	}
	@media (min-width: 1856px) {
		.main-content {
			grid-template-columns: repeat(6, 1fr);
		}
	}
	@media (min-width: 1920px) {
		.main-content {
			grid-template-columns: repeat(6, 1fr);
		}
	}
	@media (min-width: 2048px) {
		.main-content {
			grid-template-columns: repeat(7, 1fr);
		}
	}
	@media (min-width: 2560px) {
		.main-content {
			grid-template-columns: repeat(7, 1fr);
		}
	}
	/*
	.notification-popup {
		display: none;
		position: fixed;
		top: 50px;
		right: 20px;
		background: white;
		color: black;
		padding: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
		border-radius: 5px;
		min-width: 200px;
		width: 200px;
		z-index: 99;
		font-size:14px;
	}
	*/
	/* ¾Ë¸² Æ˾÷ Àüü */
	#notification-popup {
		display: none;
		position: absolute;
		top: 50px;
		right: 20px;
		min-width: 340px;
		max-width: 400px;
		max-height: 520px;
		background: #4a4a4a;
		border-radius: 16px;
		box-shadow: 0 6px 24px rgba(0,0,0,0.14), 0 1.5px 6px rgba(0,0,0,0.12);
		overflow-y: auto;
		padding: 0;
		z-index: 99;
		border: 1px solid #2d2d32;
		font-family: 'Pretendard', 'Apple SD Gothic Neo', Arial, sans-serif;
	}

	#notification-popup ul#notify-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.notify-item {
		border-bottom: 0.5px solid #2f2f2f;
		padding: 18px 24px 14px 24px;
		transition: background 0.16s;
		cursor: pointer;
	}

	.notify-item:last-child {
		border-bottom: none;
	}

	.notify-item:hover {
		background: rgba(54, 65, 103, 0.09);
	}
	.notify-row {
		display: flex;
		align-items: flex-start;
		gap: 18px;
	}

	.notify-side-left {
		min-width: 54px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		/*padding-top: 3px;*/
	}

	.notify-side-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.notify-badge {
		display: inline-block;
		padding: 5px 13px;
		border-radius: 11px;
		background: #121212;
		color: #fff;
		font-size: 12px;
		font-weight: 300;
		letter-spacing: 0.01em;
		margin-bottom: 4px;
	}

	.notify-img {
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.notify-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 8px;
		background: #2a2c32;
		display: block;
	}

	.notify-title {
		font-size: 14px;
		font-weight: 600;
		color: #fafbff;
		margin-bottom: 4px;
		margin-top: 0;
		white-space: pre-line;
		text-align: left;
	}

	.notify-content {
		font-size: 13px;
		color: #bfc2d0;
		margin: 0;
		margin-bottom: 4px;
		text-align: left;
		word-break: break-all;
		white-space: pre-line;
	}

	.notify-date {
		color: #9293a7;
		font-size: 13px;
		font-weight: 400;
		margin-top: 2px;
		text-align: left;
	}

	/* ½ºÅ©·Ñ¹Ù ½ºÅ¸ÀÏ */
	#notification-popup::-webkit-scrollbar {
	  width: 7px;
	}
	#notification-popup::-webkit-scrollbar-thumb {
	  background: #2e3440;
	  border-radius: 7px;
	}
	
	
	

	.user-popup {
		display: none;
		position: fixed;
		top: 56px;
		right: 20px;
		background: #4a4a4a;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		padding: 10px 0px;
		z-index: 1001;
		min-width: 140px;
		width: 140px;
	}

	.user-info {padding:0px 0px;margin:0;}
	.user-info ul {
		margin-bottom:6px;
	}
	.user-info ul.line {
		border-top:solid 1px #616161;
	}
	.user-info ul li {padding:10px 20px;font-size:14px;}
	.user-info ul li:hover {background:#5b5b5b;}
	.user-info ul li i {width:24px;}
	.user-info h3 {
		margin:0;
		padding:10px 20px;
		font-size:16px;
		font-weight:600;
		border-bottom:solid 1px #616161;
		margin-bottom:10px;
		color:#fff;
	}

	.menu-total-popup {
		display: none;
		position: fixed; /* ¡ç fixed·Î º¯°æ */
		left: 0;
		top: 0;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.2);
		padding: 20px 20px;
		z-index: 1001;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: auto; /* ³»¿ëÀÌ ³ÑÄ¥ °æ¿ì ½ºÅ©·Ñ °¡´É */
	}
	.menu-total-popup h3 {
		padding:5px 15px;
		font-size:18px;
		font-weight:600;
	}
	.menu-total-popup h3 img.imgLogo {
		width:50px;
	}
	.menu-total-popup h3 span {
		font-size:15px;
		font-weight:300;
	}
	.menu-total {
		padding:0px 0px;
		display: flex;
		white-space: nowrap;
		padding: 5px;
		flex-wrap: nowrap;
		overflow-x: auto;
		max-height:90vh;
		overflow-y: auto;
	}
	.menu-total h3 {
		padding:5px 10px;
		font-size:16px;
		font-weight:600;
		padding-bottom:10px;
		border-bottom:solid 1px #eee;
	}
	.menu-total ul {
		margin-right: 30px;
		width:10.5%;
	}
	.menu-total ul li {
		padding:10px 10px;
		font-size:16px;
	}
	.menu-total ul li:hover {background:#eee;border-radius: 8px;}

	.menu-close {
		position: absolute;
		top: 22px;
		right: 22px;
		cursor:pointer;

		display: flex;
		justify-content: flex-end;

	}
	.menu-close i {
		font-size:36px;
	}
	
    @media (max-width: 768px) {
	
		.menu-total-popup h3 {
			padding:5px 10px;
			font-size:16px;
		}
		.menu-total-popup h3 img.imgLogo {
			width:35px;
			height:35px;
		}
		.menu-total-popup h3 span {
			font-size:14px;
		}

		.menu-total {
			display: block;
		}
		.menu-total ul li {padding:5px 10px;}
	}

	.post-button {
		padding: 8px 16px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 1em;
		transition: background-color 0.3s ease;
	}

	.post-button:hover {
		background-color: #0056b3;
	}

	.board-layer {
		position: absolute;
		right: 0;
		background: #212121;
		padding: 15px;
		/*border: 0.5px solid #ccc;*/
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 10;
		max-width: 160px;
		display: none;
		padding: 5px 0;

	}

	.layer-content {
		font-size: 0.9em;
		color: #555;
	}
	.board-layer ul {}
	.board-layer ul li {
		padding:10px;
	}
	.board-layer ul li:hover {
		background:#444444;
		color:#333;
	}
	.board-layer ul li a {
		padding:0px 10px;
		font-size:14px;
		color:#ebebeb;
	}
	.board-layer ul li a:hover {
		color:#ebebeb;
	}
	
	.bottom-sheet-overlay {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9998;
		display: none;
	}

	.bottom-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: -100%;
		background: #282828;
		border-radius: 12px 12px 0 0;
		z-index: 9999;
		transition: bottom 0.3s ease-out;
		box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
	}

	.bottom-sheet.active {
		bottom: 0;
	}

	.bottom-sheet-content {
		padding: 16px;
		max-height: 80vh;
		overflow-y: auto;
	}

	.bottom-sheet-content ul li {
		padding:10px;
	}
	.bottom-sheet-content ul li:hover {
		background:#696969;
	}
	.bottom-sheet-content ul li a {
		font-size:14px;
	}
	.bottom-sheet-content ul li a:hover {
		background:#696969;
	}

	.close-sheet-btn {
		display: block;
		margin: 0 auto 10px;
		padding: 1px 10px 1px;
		background: #4b4b4b;
		border: none;
		border-radius: 12px;
		cursor: pointer;
	}
	.close-sheet-btn i {
		color:#333;
	}

	.none-data {
		display:block;
		padding:100px 70px;
		margin:10px 20px;
		text-align:center;
		border-radius: 8px;
		box-sizing: border-box;
	}
	.none-data p {
		font-size:16px;
		color: #d4d4d4;
	}
	

    .playlist-container {
		
		display: block;
		padding: 20px;
		/*margin-right:20px;*/
		box-sizing: border-box;
    }

	.playlist-item {
		background-color: #121212;
		padding: 15px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		transition: box-shadow 0.2s ease;
		/*
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1),
					0 -2px 6px rgba(0, 0, 0, 0.05),
					2px 0 6px rgba(0, 0, 0, 0.05),
					-2px 0 6px rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease-in-out;
		*/

		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-bottom: 6px;
		width: 100%; /* È­¸é¿¡ ¸Â°Ô ³Êºñ¸¦ 100%·Î ¼³Á¤ */
		box-sizing: border-box;
	}

	.playlist-item:hover {
    /*transform: translateY(-3px);*/
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
		/*
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15),
                0 -3px 8px rgba(0, 0, 0, 0.08),
                3px 0 8px rgba(0, 0, 0, 0.08),
                -3px 0 8px rgba(0, 0, 0, 0.08);
		*/
	}
	.playlist-item .playlist-thumb {
		width: 30%;
        max-width: 320px;
        max-height: 180px;
		overflow: hidden;		
	    flex-shrink: 0;  /* À̹ÌÁö Å©±â ÁÙ¾îµéÁö ¾Êµµ·Ï °íÁ¤ */
	}
    .playlist-item img {
        width: 100%;
		height: auto;
        border-radius: 8px;
        margin-right: 15px;
    }

	.playlist-thumb .runTime {
		font-size:11px; 
		padding:2px 5px;  
		background-color : rgb(0,0,0); opacity : 0.7;
		/*background: transparent;*/
		color:#fff;
		border-radius:5px;
		position: relative; 
		display:inline-block;
		float:right;
		right:5px; 
		bottom: 27px; 
		font-weight:500;
	}
	.playlist-info {
		flex-grow: 1;
		margin: 0 20px;
		min-width: 50%; 
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		box-sizing: border-box;
	}

	.playlist-info h3 {
		position: relative;
		display: block;
		font-size: 18px;
		font-weight:500;
		line-height:24px;
		word-break: break-word;
		padding-bottom: 10px;
		margin-bottom: 0px;
		margin-right: 30px;
	}
	.playlist-info h3 a {
		color: #ebebeb;
	}

	.playlist-info h3 span {
		font-size: 13px;
		line-height:24px;
		word-break: break-word;
		margin-left: 10px;
		font-weight:300;
	}
	/* ¾Æ·¡ÂÊ Á¤º¸µé¿¡ ¿©¹é Ãß°¡ (¼±ÅûçÇ×) */
	.playlist-info p {
		margin: 3px 0;
		color: #bdbdbd;
		font-size:14px;
	}
	.playlist-info p label {
		color: #ebebeb;
		text-align:center;
		width:50px;
	}

	.playlist-info .runTime{
		font-size:13px; 
		padding: 4px 6px;
		background-color : rgb(0,0,0); opacity : 0.7;
		/*background: transparent;*/
		color:#fff;
		border-radius:5px;
		position: relative; 
		display:inline-block;
		font-weight:500;
	}

	.playlist-info .lang {
		font-size: 13px;
		padding: 4px 6px;
		background-color: #0099cc;
		color: #fff;
		border-radius: 5px;
	}
	
	.playlist-info .level {
		/*
		background:#ff0066; 
		color:#fff;
		*/
		padding:4px 8px;
		font-size:13px;
		border-radius: 5px;
	}
	.playlist-info .level.beginner {
		background:#ff33ff; 
		color:#fff;
	}
	.playlist-info .level.Intermediate1 {
		background:#ff6600; 
		color:#fff;
	}
	.playlist-info .level.Intermediate2 {
		background:#ff0066; 
		color:#fff;
	}
	.playlist-info .level.Advanced {
		background:#cc0033; 
		color:#fff;
	}


	a.btn-detail {
		display: inline-block;
		padding: 2px 8px;
		font-size: 12px;
		font-weight: 400;
		color: #333;
		background-color:#eee;
		border: none;
		border-radius: 6px;
		text-decoration: none;
		transition: background-color 0.2s ease;
		margin-bottom: 15px;
	}

	a.btn-detail:hover {
		background-color: #ddd;
	}

	.playlist-actions {
		position: relative;
		cursor: pointer;
		font-size: 20px;
		margin-right:0px;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 32px;
		transition: background-color 0.2s ease;
		z-index:0;
	}


	.playlist-actions:hover {
		background-color: #f5f5f5;
		color:#333;
	}



	.action-menu {
		display: none;
		position: absolute;
		right: 10px;
		bottom: 10px;
		width:none;
		background: white;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
					0 -2px 4px rgba(0, 0, 0, 0.05),
					2px 0 4px rgba(0, 0, 0, 0.05),
					-2px 0 4px rgba(0, 0, 0, 0.05); /* »ó´Ü, Á¿쿡µµ ±×¸²ÀÚ Ãß°¡ */

		padding: 5px 10px;
	}

	.action-menu a {
		display: block;
		padding: 8px 12px;
		color: #333;
		text-decoration: none;
		white-space: nowrap;
	}

	.action-menu a:hover {
		background: #f0f0f0;
	}

	@media screen and (max-width: 1024px) {
	
		.playlist-info h3 {
		}
		a.btn-detail {
			font-size: 12px;
			display: inline-block;
			margin-top: 0px;
		}
		.playlist-actions {
			position: absolute;
			right: 0px;
			bottom: 20px;
			/*z-index: 1000;*/
		}
	}


	.detailPopup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: -1; /* ¡Ú ±âº»Àº µÚ·Î ¼û±è */
		display: none;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.detailPopup-overlay.active {
		z-index: 9999; /* ¡Ú iframeÀÌ ·ÎµåµÈ ÀÌÈÄ¿¡¸¸ º¸¿©Áö°Ô */
		display: flex;
	}
	/* Æ˾÷ ÄÜÅÙÃ÷ ¹Ú½º */
	.popup-content {
		position: relative;
		width: 80%;
		max-width: 800px;
		height: 80%;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0,0,0,0.3);
		overflow: hidden;
		z-index: 10000; /* ¡Ú iframe Æ÷ÇÔÇÑ ÄÜÅÙÃ÷¸¦ ¹è°æº¸´Ù À§·Î */
		display: flex;
		flex-direction: column;
	}

	/* ´Ý±â ¹öÆ° */
	.popup-close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 24px;
		cursor: pointer;
		color: #333;
		z-index: 10001; /* ¡Ú ´Ý±â ¹öÆ°ÀÌ °¡Àå À§¿¡ */
	}

	/* iframe ³»ºÎ°¡ µ¤ÀÌÁö ¾Êµµ·Ï */
	.popup-content iframe {
		flex: 1;
		border: none;
		z-index: 10000; /* ¡Ú iframeÀÌ Ç×»ó À§¿¡ º¸À̵µ·Ï */
	}

    /* ¹ÝÀÀÇü ½ºÅ¸ÀÏ */
    @media (max-width: 1024px) {
		.playlist-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between; /* ÁÂ¿ì °£°Ý µ¿ÀÏÇÏ°Ô */
		}

        .playlist-item {
			vertical-align:top;
            display: inline-block;
			float:none;
			width: calc(50% - 10px); /* Á¤È®ÇÏ°Ô 2°³ ¹èÄ¡ */
			margin-bottom: 20px;
			box-sizing: border-box;

        }

        .playlist-item .playlist-thumb {
            display: block;
            width: 100%;
			height:auto;
			overflow: hidden;
        }
        .playlist-item .playlist-thumb img {
            width: 100%;
			height: auto; /* ºñÀ² À¯Áö */
        }
		.playlist-info {
			margin:0px;
		}

		.playlist-info h3 {
			margin: 5px 0;
			font-size: 16px;
			line-height: 1.4;
			height: 2.8em; /* 2ÁÙ ³ôÀÌ À¯Áö */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 2ÁÙ Á¦ÇÑ */
			-webkit-box-orient: vertical;
			word-wrap: break-word;
		}

		/* Æ˾÷ ÄÜÅÙÃ÷ ¹Ú½º */
		.popup-content {
			width: 100%;
			margin:0px 5px;
			box-sizing: border-box;
		}

    }

    @media (max-width: 414px) {
		.playlist-container {
            width: calc(100%);
			margin-right:0px;
		}
        .playlist-item {
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
        }

        .playlist-item .playlist-thumb img {
            width: 100%;
			height: auto;
        }
				
		.page-title {
			font-size: 16px;
			font-weight: bold;
			margin: 20px 20px 20px;
		}
		.none-data {
			padding:50px 20px;
		}
		.none-data p {
			font-size:14px;
		}
		
    }

	.word {
		display: inline-block;
		margin: 0 2px;
		padding: 2px 2px;
		font-size:12px;
		color:#333;
	}

	.word:hover {
		background: #dbeafe;
		color: #1d4ed8;
	}

	.highlighted-word {
		background-color: #fff3cd;
		padding: 4px 10px;
		border-radius: 10px;
		font-weight:500;
	}
	.learning-word {
		background-color: #b3e7ff;
		padding: 4px 10px;
		border-radius: 10px;
		font-weight:500;
	}
	.learned-word {
		background-color: #626262;
		color:#fff;
		padding: 4px 10px;
		border-radius: 10px;
		font-weight:500;
	}



	.footer {
		color: #6f6f6f;
		padding:20px 10px;
		font-size:12px;
		display: flex;
		flex: 1;
		margin-left: 260px;
		margin-top: 20px;
		/*border-left:solid 1px #474747; */
		width: calc(100% - 260px);
		flex-direction: column;
		transition: margin-left 0.3s ease;
		box-sizing: border-box;
	}
	.footer.expanded {
		margin-left: 0;
	}
	@media (max-width: 768px) {
		.footer {
			width: 100%;
			margin-left: 0;
		}
		.footer.expanded {
			/*margin-left: 220px;*/
			margin-left: 0px;
		}

	}