@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@page { size: auto;  margin: 0mm; }
  
  
@font-face {   
     font-family: 'KoreanMJ-B';   
     src: local('KoreanMJ-B'),    
     	   url('KoreanMJ-B.ttf') format('truetype');   
     font-weight: normal;    
     font-style: normal;    
   }  
@font-face {   
     font-family: 'digital-7';   
     src: local('digital-7'),    
     	   url('https://www.modoo-math.com/digital-7.ttf') format('truetype');   
     font-weight: normal;    
     font-style: normal;    
   } 
body {
  font-family:NanumSquare;
  overflow-x: hidden;
  background-color: #E5FAFF;
  margin: 0;
}
div {
  box-sizing: border-box;
}

.element-ul{
	padding:0;
	margin:0;
}
.element-ul a{
	padding:0;
	margin:0;
	text-decoration:none;
}
.element-ul a:hover{
	padding:0;
	margin:0;
	text-decoration:none;
}
.element-ul li{
	background-color:lightgray;
	color:white;
	padding:20px;
	font-size:15pt;
	margin:20px;
	font-weight:bold;
	text-align:center;
	border-radius:10px;
}
.element-ul li:hover{
	background-color:lightgray;
	text-decoration: none;
	
}
.two_sheets{
	padding-left:0px;
	padding-right:0px;
}
.three_sheets{
	padding-left:0px;
	padding-right:0px;
}
.four_sheets{
	padding-left:0px;
	padding-right:0px;
}
#grade-menu-inpage{
	margin-top:50px;
	
}
#grade-menu-inpage ul{
	display: inline-block;
	
}
.content{
	text-align:left;
}
.content a{
	display:block;
	text-align:left;
}
#grade-menu-inpage ul a{
	font-size:15pt;
	font-family:gothic;
	
}
* {
  box-sizing: border-box;
}
.link-icon { position: fix; display: inline-block; top:50px;  margin-top:10px;  }
.link-icon2 { position: fix; display: inline-block; top:50px;  margin-top:10px; width:30px; margin-right:20px; }
.link-icon.twitter { right:50px; margin-left:30px; background-repeat: no-repeat; }
.link-icon.facebook { right:120px; background-repeat: no-repeat; } 
.link-icon.kakao { right:190px; background-repeat: no-repeat; }

/* Style the header */
.header {
  background-color: #f1f1f1; 
  padding: 0px;
  text-align: center;
}


/* /* Style the top navigation bar */ */
/* .topnav {  */
/* overflow: hidden; */
/* background-color: #999;  */
/* }  */

/* /* Style the topnav links */ 
/* .topnav a { */
/*   float: left; */
/*   display: block; */
/*   color: #f1f1f1; */
/*   text-align: center; */
/*   padding: 14px 16px; */
/*   text-decoration: none; */
/* } */

/* /* Change color on hover */ */
/* .topnav a:hover { */
/*   background-color: #ddd; */
/*   color: black; */
/* } */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
 
}

li {
  background-color: #ffffff;
  list-style-type: none;
/*   float: left; */
}

li a, .dropbtn {
  display: inline-block;
  color: #333333;
  text-align: center;
  padding: 5px 15px;
  text-decoration: none;
  radius: 50px;
}

li a:hover, .dropdown:hover .dropbtn {

  text-decoration:underline; color:#8600E4
  color:#333333;
}

li.dropdown {
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgba(10,10,10,0.1);
  text-decoration: none;
  
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover a.dropbtn {
  color: white;
}
.quiz{
	height:1500px;

}
.w700 {
 font-weight: 700;
}
.paper-wrap {

  width: 60%;
  height:800px;
  margin: auto;
/*   min-height:900px; */
/*   max-height: 1200px; */
  padding: 0;
  background-color:white;
}
.quiz{
 height:800px;
}
.answer{
 background:white;
}
.answer-sheet{
  background:white;
  margin: 0;
  padding: 0;
}
#guide li{
  background-color:#F0FEED;
}
/* .clearfix::after { */
/*   content: ""; */
/*   clear: both; */
/*   display: table;} */

/* Create three equal columns that floats next to each other */
.column1 {
  float: left;
  width: 30%;
  height: auto;
  padding-bottom: 0px;
  word-wrap: break-word; 
}
.column2 {
  float: left;
  width: 30%;
  height: auto;
  padding-bottom: 0px;
  word-wrap: break-word; 
}
#exam_options td{
  padding-left : 15px;
  padding-top : 3px;
  padding-bottom : 3px;
}
input:focus {
  background-color: yellow;
}
/* Clear floats after the columns */
.row1:after {
  content: "";
  display: table;
  clear: both;
}
.problem-instance{
 word-wrap: break-word;
  
  }
p.problem-number {
   background: #ffffff;
   padding:0;
   margin:0;
   top:-2%;
   left:-1%;
/*    border:1px solid gray; */
/*   border-radius: 0.8em; */
/*   -moz-border-radius: 0.8em; */
/*   -webkit-border-radius: 0.8em; */
  color: #000;
  display: inline-block;
  text-align: center;
/*   width: 1.0em;  */
}

.option_table td:nth-child(odd) {
 border:0px solid gray;
 width: 200px;
 text-align:center;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.option_table td:nth-child(even) {
 border:0px solid gray;
 width: 200px;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.options{
 position:fixed;
 top: 150px;
 font-size: 8px;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 border-radius:0px;
}
.options button{
 font-size:8px;
}
.options input{
 font-size:8px;
}
.options2{
 position:fixed;
 top: 200px;
 font-size: 8px;
}
.options2 button{
 font-size:8px;
}
.options2 input{
 font-size:8px;
}	
.input_answer{
 right:100px;
 bottom:100px;
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 50px;
  background-color: #04AA6D;
}
#sheet-container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
/* .grade{
 		border: 1px #D3D3D3 solid;
        border-radius: 5px;
        background-image: url("img/paper3.jpg");
        background-repeat : no-repeat;
        background-size : cover;
        background-color: #fff9dc;
/*          background-clip: border-box;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position:relative;
} */
/* body { */
/*         margin: 0; */
/*         padding: 0; */
/*         background-color: #FAFAFA; */
/*         font: 12pt "Tahoma"; */
/*     } */
/*     * { */
/*         box-sizing: border-box; */
/*         -moz-box-sizing: border-box; */
/*     } */
/*     .page { */
/*         width: 21cm; */
/*         min-height: 29.7cm; */
/*         padding: 2cm; */
/*         margin: 1cm auto; */
/*         border: 1px #D3D3D3 solid; */
/*         border-radius: 5px; */
/*         background: white; */
/*         box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
/*     } */
/*     .subpage { */
/*         padding: 1cm; */
/*         border: 5px red solid; */
/*         height: 256mm; */
/*         outline: 2cm #FFEAEA solid; */
/*     } */
    
/*     @page { */
/*         size: A4; */
/*         margin: 0; */
/*     } */
    
/*  body { */
/*         margin: 0; */
/*         padding: 0; */
/*         background-color: #FAFAFA; */
/*         font: 12pt "Tahoma"; */
/*     } */
/*     * { */
/*         box-sizing: border-box; */
/*         -moz-box-sizing: border-box; */
/*     } */
/*     .page { */
/*     	margin:1cm auto; */
/*         width: 210mm; */
/*         min-height: 297mm; */
/*         padding: 10mm; */
/*         margin: 10mm auto; */
/* /*         border: 1px #D3D3D3 solid; */ */
/*         border-radius: 5px; */
/*         background: white; */
/*         box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
/*     } */
/*     .subpage { */
/* /*          padding: 1cm;   */ */
/*         border: 1px black solid; */
/*         height: 277mm; */
/* /*         overflow:hidden; */ */
/* /*         outline: 2cm gray solid; */ */
/*     } */
        
/*     @page { */
/*         size: A4; */
/*         margin: 0; */
/*     } */

/* 윈도우 화면 변경시 호출됨 */
@media screen and (max-width:800px) {

	#share_modal{ 
 			display:none;
 		}
  .header {
    padding:10px;
  }
  .column {
    width: 100%;
  }
  .paper-wrap{
   
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .problem-table{
   font-size: 40%;
  }
  .answer-sheet{
   font-size: 40%;
  }
  ul{
   height: 104px;
  }
/*   .column1, .column2 { */
/*    padding:0; */
/*   } */
  .answer{
   padding:10px;
  } 
  .btn{
   font-size:20pt;
  }
  
 .settings_menu_div .switch {
		  position: relative;
		  display: inline-block;
		  width: 80px;
		  height: 50px;
		}
  
}

@media only screen and (max-width: 1800px) {
  	#side-menu{
      display:none;
    }
    
  
	
}
	
}
@media (min-width:641px) {
    .header {
      /* force devises with a smaller width to observe this style */
      min-width: 700px;
    } 
    
}
.selection-img {
                width: 150%; /* 모바일에서 전체 너비 사용 */
                clip-path: inset(0 20% 0 0); /* 필요에 따라 조정 */
            }
@media (max-width: 768px) {
 		
            .selection-img {
                width: 150%; /* 모바일에서 전체 너비 사용 */
                clip-path: inset(0 20% 0 0); /* 필요에 따라 조정 */
            }
            .problem-instance {
  				  line-height: 1.25;
  			}
}

 .overflow {
      height: 200px;
    }
body {
        margin: 0;
        padding: 0;
       
        font: 12pt "Tahoma";
    }
* {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
 .main{
	position:relative;
}
.main-page{
	    background-color:white;
        width: 21cm;
        /* min-height: 29.7cm; */
        padding-left: 20px;
        padding-right:20px; 
        margin: 1cm auto;
        border: 1px #C3C3C3 solid;
        border-radius: 5px; 
/*         background-image: url("img/paper3.jpg"); */
        background-repeat : no-repeat;
        background-size : cover;
     /* background-color: #fff9dc; */
/*          background-clip: border-box; */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position:relative;
        top:50px; 
}
#search-tab {
  position: absolute;
  top: 85px;         /* 위쪽 고정 */
  left: 50%;         /* 가로 중앙 */ 
  transform: translateX(-50%); /* 가로축만 중앙 정렬 */
  width: 21cm;
  min-height: 30px;
  border: 1px solid #C3C3C3;
  border-radius: 5px;
  background-color: white;
  overflow: hidden;
  z-index:100;
  overflow-y: auto; /* 넘치면 스크롤 */
  max-height: 100vh; /* 화면의 80%까지만 늘어나고 이후 스크롤 */
}

.page {
  background-color: white;
  width: 21cm;
  min-height: 29.7cm;
  margin: 1cm auto;
  border: 1px #C3C3C3 solid;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: relative;
  top: 50px;
  transform-origin: left top;
  overflow: hidden; /* 빛이 넘치지 않도록 */
}

/* 반짝이는 효과: .shine 클래스가 붙었을 때만 실행 */
.page.shine::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(40deg);
  animation: shine 2s ease-out infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes shine {
  0%   { transform: translate(-100%, -100%) rotate(40deg); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(100%, 100%) rotate(25deg); opacity: 0; }
  100% { transform: translate(100%, 100%) rotate(25deg); opacity: 0; }
}

#page_sub_container {
    display: flex;
    justify-content: center;
    align-items: center;    
    position: relative; /* 필요하다면 추가하세요. */
    top:50px;
}

	.link-icon2:hover {
  cursor: pointer;
}

.page_sub {
    background-color: white;
    z-index: -100;
    width: 21cm;
    min-height: 29.7cm;
    padding: 20mm; 
    position: absolute; /* 상위 요소 (.container)에 대한 상대 위치를 설정합니다. */
    top: 290px;
    margin: 1cm auto;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
select{
	border:1px solid #cccccc;
}
.introduction{
	font-size:15pt;
	margin-top:20px;
	font-family:나눔고딕;
}
a{
	font-family:나눔고딕;
}
h1{
	font-family:나눔고딕;
}
h2{
	/* font-size:50pt !important; */
	font-family:나눔고딕;
	margin-bottom:30px;
}
#can_div {       
        width: 21cm;
        min-height: 29.7cm;
        margin: 1cm auto;
        position:relative;
        top:110px; 
/*         right:100px; */
}
#mathlive {
  width: 300px;
  border: 1px solid #aaa;
  position:absolute;
  left:200px;
  top:400px;
}

#searchInput {
  background-image: url('https://www.modoo-math.com/img/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#searchInput:focus {
  background-image: url('https://www.modoo-math.com/img/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  background-color: white;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
.modal_selection{		
		background-color: #F2F2F2;
        width: 21cm;
        height:70px;
        padding: 10px;        
       /*  margin: 1cm auto; */
        margin-bottom:0px;
        border: 1px solid lightgray; 
        border-radius: 5px;
        background-repeat : no-repeat;
        background-size : cover;
        left:0;
        right:0;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position:absolute;
        bottom:0px; 		
		z-index:700;		
		resize: both;
		position:fixed; 
	    left:50%;
	    transform: translate(-50%,0);
	    
}
li img {
    max-width: 100%; /* 이미지의 너비가 li 태그의 너비를 넘지 않도록 함 */
    height: auto; /* 이미지의 높이를 자동으로 조정하여 비율 유지 */
}

#modal_selection_ul_div{   
 	overflow-y: scroll;
	overflow-x: hidden;
	border: 2px #3C6478 solid; 
    border-radius: 5px;
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);        
	background-color:#F2F2F2;
	left: -11px;
	padding:20px;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border:1px solid #ffffff;
}
.modal_selection li{
	border: 1px solid #3C6478;
	display:inline-block;
	width:200px;
	border-radius:5px;
}
.modal_selection li img{
 	max-width:100%;
	max-height:100%;
	text-align:center;
}
.modal_selection li:hover{
/*	background-color:#B2DDFF;  */
	display:inline-block;
/* 	border:3px solid #d1e2ff; */
/* 	background-color:#d1e2ff; */
/* 	background-color:yellow; */
/* 	transform: scale(1.1); */
/* 	position:absolute; */
/* 	z-index:100; */
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
#selected_ques{
	overflow-y: scroll;   
	overflow-x: hidden; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);        
	background-color:#F2F2F2;
	left: -11px;
	padding:20px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border:1px solid #3C6478;
	z-index:5000;
}

#selected_ques_ul{
	padding:0;
}
#selected_ques_ul li{
/* 	display:inline-block; */
	margin-bottom:10px;
	
}
#selected_ques_ul li:hover{
/* 	display:inline-block; */
/* 	background-color:yellow; */
/* 	transform: scale(1.1); */

}
#selected_ques_ul li {
    border-radius: 5px;
    border: 1px solid #555555;
    
    padding: 5px;
    
}

#selected_ques_ul li input{
	margin:2px;
	margin-left:4px;
}
#selected_ques_ul li button{
	margin:2px;
	padding:1px;
	font-size:15px; 
	width:25px;
}

#selected_test{
	overflow-y: scroll;
    
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);        
	background-color:#F2F2F2;
	left: -11px;
	padding:20px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border:1px solid #3C6478;
	z-index:5000;
}

#selected_test_ul{
	padding:0;
}
#selected_test_ul li{
/* 	display:inline-block; */
	margin-bottom:10px;

}
#selected_test_ul li:hover{
/* 	display:inline-block; */
/* 	background-color:yellow; */
/* 	transform: scale(1.1); */

}
#selected_test_ul li input{
	margin:2px;
	margin-left:4px;
}
#selected_test_ul li button{
	margin:2px;
	padding:1px;
	font-size:15px; 
	width:25px;
}
.main-sub-page{
	border-radius:3px;
    border: 0px white solid;
    /* height: 256.5mm; */
    outline: 20mm transparnet solid;
}
.subpage {
/*         padding: 1cm; */
		border-radius:3px;
        border: 0px white solid;
        height: 256.5mm;
        outline: 20mm transparnet solid;
        overflow:hidden;
        
    }
    
    @page {
        size: A4; 
/* 		size:29.7cm; */
        margin: 0;
    }
    
    @media print {
     	body{
     		margin-bottom:0px; /* 미리보기 화면에서 아래부분이 가려지는 문제해결. 기본값으로 margin-bottom:300px를 주고 프린트 시에 0px로 조절  */
     	}
     	 #book_page2 {
		    margin: 0 !important;
		  }
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;            
            min-height: 29.685cm; /* 프린트시 장수 늘어날 때 밀리는 현상 방지 */ 
            box-shadow: initial;
            background: initial;
            background-color: white;
            page-break-after: auto;
            overflow:hidden;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
            top:0px; 
            transform:scale(1);
            
        }
        li[data-toggle="tooltip"] {
    display: none !important;
  }
    /* .input_answer_val{ visibility:hidden; }   */   
     #share_modal{display:none;} 
    #main-content{display:none;}
    .text{display:none;};
    #menu-table{display:none;};
    .checked-list{ display:none; } 
    .checked_exam{ display:none; }
    .input_answer{ display:none; }
    .treeview{ display:none; } 
    .grade{ display:none; visibility:hidden;} 
    .header{ display:none; }  	 
    .noprint{ display:none; } 
    .paper-wrap{ display:block; width:90%; border:1px solid gray; } 
    .answer-sheet { font-size:11pt;  } 
    .column1, .column2 { font-size:13pt;  } 
    .options {display:none;} 
    .options2 {display:none;} 
    title { display: none; } 
    .header_right {display:none;} 
    #footer {display:none;} 
    .answerpage{ display:block; }
    #selected_ques{display:none;}
    .modal_selection{display:none;}
    #guide{display:none;}
    #side-menu{display:none;}
    .accordion-menu{display:none;}
    #survey-form{display:none;}
    #event{display:none;}
    #generate-again{display:none;}
    #chat-container{display:none;}
    #navigation{display:none;}
    .accordion-menu{display:none;}
    #accordian{display:none;}
    #page-reload{display:none;}
    #do-survey{display:none;}
    #selected_test{display:none;}
    #test_load_modal{display:none;}
    #selected_test_nav{display:none;}
    #selected_test_nav_table{display:none;}
    #modal_selection_ul_div{display:none;}
    #answer-print{display:none;}
    #problem-print{display:none;}
    #share_modal{visibility:hidden;} 
    .recommend_purchase{visibility:hidden;}
    #accordian-toggle{display:none;}
    #share-popup{display:none;}
    #zoomIcon{display:none;}
    .modal_selection{display:none}
    #modoomath-right-banner{display:none;}
     #ai_floating_button{display: none !important;}
      .floating-plus{display:none !important;}
      #search-tab{display:none !important;}
      .link-icon2{display:none;}
       #toast-root{visibility:hidden;} 
     #recommend_coupon{display:none !important;}  
    }
   #share-board{display:none;}
   
	
/* /* 프린트시 스타일 변경 */  */
/* @media print {	 */
/* /*  		html, body { */ */
/* /*             width: 210mm; */ */
/* /*             height: 297mm;         */ */
/* /*         } */ */
/*         .page { */
/*             margin: 0; */
/*             border: initial; */
/*             border-radius: initial; */
/*             width: initial; */
/*             min-height: initial; */
/*             box-shadow: initial; */
/*             background: initial; */
/*             page-break-after: avoid; */
/*         } */
/* /*          .subpage { */ */
/* /*          	margin: 0; */ */
/* /* 	        border: 1px black solid; */ */
/* /* 	        height: 277mm; */ */
/* /*     } */ */
/*    .treeview{ display:none; } */
/*    .grade{ display:none; } */
/*    .header{ display:none; }  	 */
/*    .noprint{ display:none; } */
/* /*    .paper-wrap{ display:block; width:90%; border:1px solid gray; } */ */
/* /*    .answer-sheet { font-size:11pt;  } */ */
/* /*    .column1, .column2 { font-size:13pt;  } */ */
/*    .options {display:none;} */
/*    title { display: none; } */
/*    .header_right {display:none;} */
/*    #footer {display:none;} */
/* } */
.treeview{
 position: absolute;
 float:left;
}
.keylock{
 width: 20px;
 height: 20px;
}
#side-menu{
 position:fixed;
 max-width:350px; 
 height:100%;
 left:0px; 
 top:70px;
 z-index:1000;
 overflow:scroll;
 
}
#grade-menu{
	padding:0;
	margin:0;
	
}

div.btn{
	width:100%;
/* 	background-color:lightgray; */
	font-weight:bold;
	font-size:10pt;
	text-align:left;
	margin-top:10px;
}
a#login,a#logout,a#intro,a#signup,a#username,a#remain_sheet_cnt,a#buy{

 background-color:#f1f1f1;
 color:black;
}
.highlights{
 border:2px solid red;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
 
#canvas {
   position: relative;
   left: calc(50% - 390px);
   top: 50px;
   border: 1px dotted black;
   cursor: crosshair;
   background: #ecf0f1;
}
.grade-item{
	width:100%;
	background-color:#3043FD;
	color:white;
	font-size:12pt;
	font-weight:bold;
	text-align:left;
	margin-top:10px;
}
.grade-item:hover{
	width:100%;
	background-color:#5566FF;
	color:white;
	font-size:12pt;
	font-weight:bold;
	text-align:left;
	margin-top:10px;
}
.rating-loading {
  width: 25px;
  height: 25px;
  font-size: 0;
  color: #fff;
  background: url(../img/loading.gif) top left no-repeat;
  border: none;
}

.rating-container {
  .rating-stars {
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }
  .rating-input {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    font-size: 1px;
    border: none;
    background: 0 0;
    padding: 0;
    margin: 0;
  }
}

.rating-disabled {
  .rating-input, .rating-stars {
    cursor: not-allowed;
  }
}

.rating-container {
  .star {
    display: inline-block;
    margin: 0 3px;
    text-align: center;
  }
  .empty-stars {
    color: #aaa;
  }
  .filled-stars {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    color: #fde16d;
    white-space: nowrap;
    overflow: hidden;
    -webkit-text-stroke: 1px #777;
    text-shadow: 1px 1px #999;
  }
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

#save_modal{
	position:absolute;
	left:0;
	right:0;
	left:50%;
	top:400px;
	transform: translate(-50%,0);
	width:500px;
	height:auto;	
	background-color:white;
    padding: 15px; 
	z-index:3000;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    overflow:hidden;
}
#share_modal{
	position:fixed;	
	right:20px;	
	top:87px;
	width:400px;
	height:80%;	
	background-color:white;
    padding: 15px; 
	z-index:0;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);    
}
#load_modal{
	position:absolute;
	left:0;
	right:0;
	left:0%;
	top:0px;
	width:100%;
	height:600px;	
	background-color:white;
    padding: 15px; 
	z-index:3000;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    overflow:scroll;
}
#test_save_modal{
	position:absolute;
	left:0;
	right:0;
	left:50%;
	top:400px;
	transform: translate(-50%,0);
	width:500px;
	height:auto;	
	background-color:white;
    padding: 15px; 
	z-index:3000;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    overflow:hidden;
}
#test_load_modal{
	position:absolute;
	left:0;
	right:0;
	left:0%;
	top:0px;
	width:100%;
	height:600px;	
	background-color:white;
    padding: 15px; 
	z-index:3000;
    border: 1px #C3C3C3 solid;
    border-radius: 5px; 
    background-repeat : no-repeat;
    background-size : cover;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    overflow:scroll;
}
@keyframes modal {
  from {opacity: 0.8; top:300px; transform:scale(0.5);transform-origin:left;}
  to {opacity: 1; top:300px; transform:scale(1);transform-origin:left;}
}
.rating-rtl {
  float: right;
}

.rating-animate .filled-stars {
  transition: width .25s ease;
  -o-transition: width .25s ease;
  -moz-transition: width .25s ease;
  -webkit-transition: width .25s ease;
}

.rating-rtl {
  .filled-stars {
    left: auto;
    right: 0;
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0) translate3d(0, 0, 0);
  }
  &.is-star .filled-stars {
    right: .06em;
  }
  &.is-heart .empty-stars {
    margin-right: .07em;
  }
}

.rating-lg {
  font-size: 3.91em;
}

.rating-md {
  font-size: 3.13em;
}

.rating-sm {
  font-size: 2.5em;
}

.rating-xs {
  font-size: 2em;
}

.rating-xl {
  font-size: 4.89em;
}

.rating-container .clear-rating {
  color: #aaa;
  cursor: not-allowed;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
  padding-right: 5px;
}

.clear-rating-active {
  cursor: pointer !important;
  &:hover {
    color: #843534;
  }
}
#exam_options{
	background-color:#ffffff;
}
#exam_options td span{
	color:black;
}
#selected_ques_nav{
	
}
#selected_ques_nav td{
	width:100%;
}
.rating-container .caption {
  color: #999;
  display: inline-block;
  vertical-align: middle;
  font-size: 60%;
  margin-top: -.6em;
  margin-left: 5px;
  margin-right: 0;
}
.name-title{
	
  font-size: 20pt;	
}
.rating-rtl .caption {
  margin-right: 5px;
  margin-left: 0;
}

@media print {
  .rating-container .clear-rating {
    display: none;
  }
}
.empty-star{
  color:#dee2e6;
}
.rating-container .filled-stars {
    -webkit-text-stroke: 0; 
    text-shadow: none; 
    color:#ffca00;
}
.progress{
    margin-top: 1rem;
    border-radius: 0; 
}
.progress-bar {
    background-color: #ffca00;
}
#footer{
	width:21cm;
	
	
}
.accordion-menu {
  border-radius: 6px; /* 모서리 살짝 둥글게 */
  position: absolute;
  top: 10%;
  left: 10%;
  width: 400px;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  font-family: 'Roboto', Arial, sans-serif;
}

#select-types select, div {
  font-family: 'Roboto', Arial, sans-serif;
}

.accordion-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0; /* 간격 제거 */
}

.accordion-menu ul li a {
  text-align: left;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.accordion-menu label {
  display: block;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
  color: #333;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease;
  border-radius: 4px; /* 각 항목도 살짝 둥글게 */
}

.accordion-menu label:hover {
  background-color: #e6e6e6; /* hover 시 약간 밝은 색 */
}

.accordion-menu input[type="checkbox"] {
  display: none;
}

.accordion-menu input[type="checkbox"]:checked + label {
  background-color: #d6d6d6; /* 선택된 색 */
  color: #000;
}

/* ✅ 선택된 항목은 hover 시에도 색 유지 */
.accordion-menu input[type="checkbox"]:checked + label:hover {
  background-color: #d6d6d6;
}

.accordion-menu ul ul {
  padding-left: 20px;
  display: none;
}

.accordion-menu input[type="checkbox"]:checked + label + ul {
  display: block;
}

.accordion-menu ul ul ul {
  padding-left: 20px;
  
}

.accordion-menu li {
  font-size: 13px;
  color: #333;
  margin: 0;
  padding: 0;
}


.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #2c3e50;
  color: #fff;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.custom-file-upload:hover {
  background-color: #34495e;
  color: #fff;
}


.survey-form {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 600px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.survey-form div {
	margin-bottom: 10px;
}

.survey-form label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.survey-form input[type="radio"],
.survey-form select {
  margin-left: 10px;
}

.survey-form button {
  display: block;
  margin-top: 20px;
}



.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background-color: #444;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.drawer-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	transition: all 0.3s ease;
}

.drawer-menu.active {
	right: 0;
}

.drawer-menu ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	
}

.drawer-menu ul li {
	margin: 20px 0;
	
}

.drawer-menu ul li a {
	color: #444;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
		
}


/* menu icon */

.menu-icon {
	display: block;
	position: relative;
	width: 30px;
	height: 20px;
	cursor: pointer;
}

.menu-icon span {
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	background-color: #fff;
	transition: all 0.3s ease;
}
 .link-icon2 {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes pulse {
    from {
      transform: scale(1.2);
    }
    to {
      transform: scale(1.2);
    }
  }
.menu-icon span:nth-child(1) {
	top: 0;
}

.menu-icon span:nth-child(2) {
	top: 8px;
}

.menu-icon span:nth-child(3) {
	top: 16px;
}

.menu-icon.active span:nth-child(1) {
	transform: rotate(45deg);
	top: 8px;
}

.menu-icon.active span:nth-child(2) {
	transform: rotate(-45deg);
	top: 8px;
}

.menu-icon.active span:nth-child(3) {
	transform: scaleX(0);
}


	#color-buttons {
        position: fixed;
        top: 20px;
        right: 20px;
      }
      button {
        margin-right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        
      }
      #color-1 {
        background-color: #F3CFC6;
      }
      #color-2 {
        background-color: #F5DEB3;
      }
      #color-3 {
        background-color: #FFDAB9;
      }
      #color-4 {
        background-color: #FFE4E1;
      }
      #color-5 {
        background-color: #FAF0E6;
      }
      
      
        <style>
.correct {
  position: relative;
  animation: correct-animation 1s linear;
}

@keyframes correct-animation {
  0% {
    border: 2px solid transparent;
  }
  100% {
    border: 2px solid red;
    border-radius: 50%;
  }
}

.incorrect {
  position: relative;
  animation: incorrect-animation 1s linear;
}

@keyframes incorrect-animation {
  0% {
    border: 2px solid transparent;
  }
  100% {
    border: 2px solid red;
    transform: rotate(45deg);
  }
}

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

:root {
  --angle: 45deg;
  --opacity: 0.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

li{
	cursor: pointer;
	transition: height 0.5s ease;
}


.correct-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  height: 100%;
}

 table {
      border-collapse: collapse;
      font-family: Arial, sans-serif;
   }
 th, td {
   border: 1px solid black;     
   text-align: left;
   padding-left:5px;
 }      
 
 .event-container {
      max-width: 600px;
      margin: 40px auto;
      padding: 30px;
      background-color: #f8f9fa;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    h2 {
      margin-bottom: 20px;
      font-weight: bold;
    }

    ol li {
      margin-bottom: 10px;
    }
    
    
    
   #keypad {
    display: flex;
    justify-content: center;
    align-items: center;
}

#setting_preview_div {
    position: absolute;
    width: 21cm;
    height:250px;
    left: -1px;
    top: -277px;
    z-index:2;
    margin:0;
    padding:0;
    overflow:visible;
    visibility:hidden;
}
#settings_menu {
    position: absolute;
    width: 21cm;
    height:250px;
    left: -1px;
    top: -277px;
    z-index:2;
    margin:0;
    padding:0;
    overflow:visible;
    visibility:hidden;
}
.problem-column {
    transition: transform 0.3s ease;
}



.listitem {
	text-align:left;
	display:block;
}
.listitem a {
	text-align:left;
}
 #hover-box {
      position: absolute;
      width: auto;
      height: auto;
      background-color: white;
    }
    
     #keyboard-pad {
  touch-action: manipulation;
}


.chatgpt-loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  animation: chatgpt-loading 1s infinite;
  animation-delay: 0.1s;
}

.chatgpt-loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chatgpt-loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

.loading-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .dot {
      width: 10px;
      height: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      margin: 0 3px;
      animation-name: bounce;
      animation-duration: 0.6s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    
    .dot:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .dot:nth-child(3) {
      animation-delay: 0.4s;
    }
    
    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-15px);
      }
    }
    
    .problem-type {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popup-image {
    display: none;
    position: absolute;
    width: 200px; /* Change this as per your requirement */
    height: 200px; /* Change this as per your requirement */
}

.popup-image img {
    width: 100%;
    height: 100%;
}
    .no-underline {
  text-decoration: none; /* 밑줄 제거 */
  outline: none; /* 포커스 시 테두리 제거 */
  -webkit-appearance: none; /* 브라우저 기본 스타일 제거 */
  -moz-appearance: none; /* 브라우저 기본 스타일 제거 */
  appearance: none; /* 브라우저 기본 스타일 제거 */
}
#selected_test_nav_table .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
#timer {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    background-color: lightgrey; /* 배경색 추가 */
    border-radius: 5px; /* 모서리 둥글게 */
}

  table .key{
  	border-radius:5px;
  }
  #buy-img {
    cursor: pointer;
  }   
   

.question {
    margin-bottom: 10px;
}

input[type="text"] {
    margin-top: 5px;
}

#pagination {
    text-align: center;
    margin-top: 20px;
}

.page-number {
    margin: 0 5px;
    cursor: pointer;
}
.share_item{
	 cursor: pointer; /* 커서 모양을 손가락 모양으로 */
	padding:10px;
}
.share_item span{
	font-size:15px;
}


/* Style the tab */
.tab {
  overflow: hidden; 
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px;
  transition: 0.3s;
  font-size: 15px;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ddd;
}

/* Style the tab content */
.tabcontent {
  display: none;  
  border-top: none;
}

#keyboard-pad {
    position: fixed;
    overflow: hidden;
    z-index: 500;
    width: 21cm;
    height: 330px;
    margin: 0px;
    padding: 10px;
    border: 1px solid lightgray;    
    background: #f9f9f9; /* 배경색 */
    top: -350px;
    visibility: visible;
    border-radius: 10px; /* 전체 키패드의 모서리를 둥글게 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 키패드에 그림자 효과 */
}

#keypad {
    display: flex;
    flex-direction: column; /* 세로로 정렬 */
    align-items: center; /* 가운데 정렬 */
    margin: 0;
    padding: 0;
    width: 100%;
}

.key {
	color:white;
	font-size:20pt;
    border: none;
    background-color: #7799aa;
    margin: 2px; /* 버튼간의 간격 */
    border-radius: 50%; /* 버튼을 원형으로 만듦 */
    width: 100%; /* 버튼의 너비 */
    height: 50px; /* 버튼의 높이 */
    line-height: 50px; /* 글자 라인 높이를 버튼 높이와 동일하게 설정하여 세로 중앙 정렬 */
    text-align: center; /* 글자 가로 중앙 정렬 */
    cursor: pointer; /* 커서 모양을 손가락 모양으로 */
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); /* 버튼에 그림자 효과 */
    transition: background-color 0.3s; /* 배경색 전환 효과 */
}

.key:hover {
    background-color: #aaccdd; /* 호버 시 배경색 */
}

.key:active {
    background-color: #d0d0d0; /* 클릭 시 배경색 */
}

.large-key {
	color:white;
	font-size:13pt;
    width: 100%; /* 큰 버튼 너비 */
    height: 50px; /* 큰 버튼 높이 */
    line-height: 50px; /* 글자 라인 높이를 버튼 높이와 동일하게 설정하여 세로 중앙 정렬 */
    border-radius: 20px; /* 큰 버튼을 둥글게 만듦 */
    background-color: #7777ff; /* 큰 버튼 배경색 */
}

.large-key:hover {
    background-color: #aaaaff; /* 큰 버튼 호버 시 배경색 */
}

.large-key:active {
    background-color: #aaaaff; /* 큰 버튼 클릭 시 배경색 */
}

.nav-key {
    width: 50px; /* 내비게이션 버튼 너비 */
    height: 50px; /* 내비게이션 버튼 높이 */
    background-color: white;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

#prev_ques {
    background-image: url('https://www.modoo-math.com/img/arrow-left.svg');
}

#next_ques {
    background-image: url('https://www.modoo-math.com/img/arrow-right.svg');
}

#answer_sheet_box {
    visibility: hidden;
    width: 50%;
    padding: 0px;
    height: 100%;
    overflow: auto;
    border-left: 1px solid gray;
    background-color: #f7f7f7;
    border-radius: 10px; /* 모서리를 둥글게 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.answer_sheet {
    visibility: visible;
    overflow-y: auto;
    margin-top: 0px;
    height: calc(100% - 20px);
    top: 0px;
    z-index: 100000;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

.answer-label {
    font-size: 15pt;
    color: #555555;
    margin-right: 5px;
}

.answer-input {
    width: 80%;
    padding: 5px;
    text-align: center;
    font-size: 15pt;
    border-radius: 5px;
    margin: 0px;
    border: 1px solid #555555;
    background-color: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 내부 그림자 효과 */
    transition: background-color 0.3s ease-in-out; /* 배경색 전환 효과 */
}
/* 흐림 제거 추천 메시지 스타일 */
.recommend_purchase {
    position: absolute;
    left: 50%;
    top: 40%;
    opacity:0.7;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
    font-size: 24px;
    z-index: 10;
}
.recommend_purchase a {
    text-decoration: none;
    color: #007BFF;
    font-weight: bold;
    font-size: 26px;
}
.recommend_purchase a:hover {
    text-decoration: underline;
}
.recommend_purchase p {
    font-size: 18px;
    margin-top: 10px;
    color: #333;
}

/* 모바일 환경에서 글씨 크기 조정 */
@media screen and (max-width: 768px) {
    .recommend_purchase {
     	width:600px;
     	top:50%;
        font-size: 28px;
        padding: 15px;
    }
    .recommend_purchase a {
        font-size: 32px;
    }
    .recommend_purchase p {
        font-size: 26px;
    }
   
}
.mode-switcher {
    display: inline-block;
    width: 150px;
    position: relative;
    background-color: #cccccc;
    border-radius: 10px;
    overflow: hidden;
}

.mode-btn {
    width: 100%;
    padding: 5px;
    font-size: 12px;
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #6b8ede;
    z-index: 1;
    transition: top 0.3s ease;
}

.mode-btn.active {
    color: black;
}  
   .slider {
    width: 150px;
    margin: 0 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background-color: #d3d3d3;
    outline: none;
    border-radius: 5px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: gray;
    cursor: pointer;
}
#zoomToggleBtn {
  position:fixed; 
  left:3%;
  bottom:170px;
  z-index: 9999;      /* 다른 요소 위에 항상 보이게 */
  cursor: pointer;
}
.answer-dimmed {
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0s ease;
}
#problemNumberMenu {
  position: fixed;
  bottom: 150px; /* 너가 말한 적당한 위치 */
  left: 0;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #ccc;
  z-index: 9999;
  padding: 5px 0;
  overflow-x: auto; /* ✅ 가로 스크롤 허용 */
  overflow-y: hidden; /* ✅ 세로 스크롤 막기 */
  white-space: nowrap; /* ✅ 줄바꿈 금지 */
}


#problemNumberScroll {
  display: inline-flex; /* ✅ 버튼들이 한 줄로 나란히 정렬되게 */
  align-items: center;
}
#problemNumberScroll button {
  margin: 0 16px; /* 간격도 조금 넓히기 */
  padding: 0 48px; /* 좌우 여백 크게 */
  height: 100px; /* ✅ 높이 2배 */
  min-width: 100px; /* ✅ 최소 너비 2배 */
  background: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
  border-radius: 16px; /* 더 둥글게 */
  font-size: 40px; /* ✅ 글자 크기 2배 */
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

#problemNumberScroll button:hover {
  background: #f0f0f0;
}
#start-guide-btn:hover {
  background-color: #3aa314 !important;
}
@keyframes boltFlash {
  0%, 100% { box-shadow: 0 0 0px rgba(255, 200, 0, 0.7); }
  50% { box-shadow: 0 0 10px 4px rgba(255, 200, 0, 0.9); }
}
.bolt-glow {
  animation: boltFlash 1s infinite;
}
#concept-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 완전 투명 배경 */
  z-index: 9998;
}

#concept-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 9999;
  border-radius: 10px;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
#concept-title {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
  line-height: 1.4;
}

#concept-popup .math {
  margin: 10px 0;
}

#concept-popup button {
  background: #1a73e8;
  color: white;
  padding: 8px 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 12px;
}

#concept-popup .close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  cursor: pointer;
  font-weight: bold;
}
#concept-add-button{
	width:200px;
	display:block;
	margin:0 auto;
	margin-top:10px;
}
.MathJax .concept-term {
  color: #333 !important;  /* 검정색으로 덮어쓰기 */
  font-weight: normal !important;
  text-decoration: none !important;
  cursor: pointer;
}

.MathJax .concept-term:hover {
  text-decoration: underline !important;
}
canvas,
svg {
  pointer-events: none;
}

.exam-graph-column,
.exam-graph-column > div,
.exam-graph-column canvas,
.exam-graph-column svg {
  pointer-events: none !important;
}

.concept-term-elementary,
.concept-term-middle,
.concept-term-high {
  position: relative;
  z-index: 1000 !important;
  pointer-events: auto;
}
.exam-title {
  font-size: 11pt;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  color: #222;
  word-break: keep-all;
    line-height: 1.5;
}
.exam-title-box {
  display: flex;
  align-items: center;         /* 수직 중앙 정렬 */
  justify-content: center;     /* 수평 중앙 정렬 (원할 경우) */
  height: 100%;                /* 상위 요소 기준으로 꽉 채우기 */
  text-align: center;
}
.exam-title-wrapper {
  display: flex;
  align-items: center;     /* 수직 중앙 정렬 */
  justify-content: center; /* 수평 중앙 정렬 */
  height: 100%;            /* 감싸는 영역 꽉 채우기 */
  text-align: center;
  padding: 0 10px;         /* 좌우 여백 조절용 */
  box-sizing: border-box;
}

.exam-title-text {
  line-height: 1.5;
  font-size: 16px;
}
.page {
  position: relative;
  overflow: hidden;
}

.blinking {
  position: relative;
  overflow: hidden;
}

.blinking::before,
.blinking::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 55%
  );
  transform: rotate(25deg);
  animation: shine 3s linear infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.blinking::after {
  animation-delay: 1.5s; /* ::before과 정확히 반주기 어긋나게 */
   animation-fill-mode: backwards; /* 🔧 시작 전엔 아예 숨김 상태로 유지 */
}

@keyframes shine {
  0% {
    transform: translate(-120%, -120%) rotate(25deg);
  }
  100% {
    transform: translate(120%, 120%) rotate(25deg);
  }
}
@keyframes popBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes shine2 {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shine-effect {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: shine2 1s ease-out;
}
.locked-item {
  pointer-events: none;
  user-select: none;
  opacity: 0.4;
  position: relative;
}

.locked-item .lock_ques {
  pointer-events: auto;
  user-select: auto;
  opacity: 1.0;
}
#btn-answer-toggle {
  margin-left: 0px;
  width:100px;
  height:47px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  cursor: pointer;
  transition: 0.2s;
}

#btn-answer-toggle.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
.list-item {
  border: 1px solid lightgray;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #fff;
  cursor: pointer;
}

.exam-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.score-box {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default !important; /* ✅ 클릭 방지 */
}

.wrong-input {
  width: 100px;
  padding: 4px 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.save-wrong-btn {
  padding: 5px 10px;
  font-size: 13px;
  background-color: #f0f0f0;
  border: 1px solid #aaa;
  border-radius: 5px;
  cursor: pointer;
}

.save-wrong-btn:disabled {
  background-color: #ddd;
  color: #888;
  cursor: not-allowed;
}
.mode-toggle-btn {
  background: none;
  border: none;
  font-size: 14px;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mode-toggle-btn .check-icon {
  display: inline-block;
  width: 16px;   /* 고정 너비 */
  text-align: center;
  color: #007bff;
  font-weight: bold;
}

.mode-toggle-btn .label-text {
  display: inline-block;
  white-space: nowrap;
  color: #333;
}
.floating-plus {
  position: fixed;
  bottom: 140px;
  left: 71%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #007BFF;
  color: white;
  font-size: 36px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
}

/* 👉 손가락 + 문구 묶는 박스 */
.floating-hand-wrapper {
  position: absolute;
  left: -230px;
  top: 30%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
 z-index: 10;
  user-select: none;
  
  
}

/* 👉 손가락 */
.floating-hand {
  font-size: 45px;
  color:orange;
  animation: handWiggle 1s ease-in-out infinite;
}
@keyframes handWiggle {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}


/* 💬 안내 문구 */
.floating-msg {
  font-size: 20px;
  position:relative;
  left:0px;
  color: #fff;
  background: #007BFF;
  padding: 10px;
  padding-left:20px;
  padding-right:20px;
  border-radius: 12px;
  border:1px solid #007bff;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
 white-space: normal; 
  font-weight: 600;
   line-height: 1.5; 
   text-align:left;
   z-index: 10;
  white-space: pre-line;  /* 줄바꿈 문자(\n) 인식 */
}
.floating-msg::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -15px; /* 말풍선 기준 위치 조정 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #007BFF;  /* 말풍선 배경색과 동일하게 */
}
.floating-close {
  position: absolute;
  display:none;
  top: -10px;
  right: -10px;
  background: white;
  color: #999;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  cursor: pointer;
  pointer-events: auto; /* 꼭 필요함! */
  z-index: 10;
}
.floating-close:hover {
  color: black;
}


/* 팝업 기본 */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}
/* ====== 팝업 개선 ====== */
.popup-content {
  background: #fff;
  max-width: 700px;
  margin: 120px auto;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
}

/* ====== 단원 체크박스 ====== */
#unitList label {
  display: flex;
  align-items: center;
  font-size: 15pt;
  background-color: #f7f7f7;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
  user-select: none;
}
#unitList label.checked {
  background-color: #d0e8ff;
  font-weight: bold;
}

#unitList input[type="checkbox"] {
  transform: scale(1.3);
  margin-right: 10px;
}

/* ====== 전체 선택/해제 버튼 ====== */
#unitList + button {
  margin: 16px auto 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14pt;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* ====== 페이지 수 & 난이도 선택 ====== */
.popup-content select {
  font-size: 14pt;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-left: 6px;
  margin-right: 12px;
  background-color: white;
}

/* ====== 버튼 영역 ====== */
.popup-content .primary,
.popup-content .secondary {
  font-size: 16pt;
  padding: 14px;
  margin-top: 18px;
  border-radius: 10px;
  width: 100%;
}

.popup-content .primary {
  background-color: #007BFF;
  color: white;
  font-weight: bold;
  border: none;
  margin-bottom: 12px;
}

.popup-content .primary:hover {
  background-color: #0056d2;
}

.popup-content .secondary {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

.popup-content .secondary:hover {
  background-color: #e0e0e0;
}
.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.grade-grid button {
  padding: 10px;
  font-size: 16px;
}
input[type="number"] {
  width: 60px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  background-color: white;
}

/* 자동입력·자동완성 시 노란 배경 방지 (크롬 대응) */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  background-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 포커스 시 기본 배경 유지 */
input[type="number"]:focus {
  background-color: white;
  border-color: #007BFF;
}
.cta-button {
      display: inline-block;
      background: #0d6efd;
      color: #fff;
      font-size: 16pt;
      padding: 10px 25px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.3s ease;
    }

    .cta-button:hover {
      background: #084298;
    }
 .wrong-input input {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
  box-sizing: border-box;
  background-color: #fafafa;
}

.wrong-input input:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
  background-color: #fff;
}
  #step1Result {
  overflow: hidden;            /* 넘치는 내용 숨김 */
  transition: max-height 0.4s ease; /* 부드러운 펼침 효과 */
  background-color: #f9f9f9;    /* 내용이 보일 때 구분용 배경 */
  padding: 0 10px;             /* 양옆 여백 */
  border-radius: 5px;
  white-space: pre-wrap; /* 공백과 줄바꿈 유지 */
  word-wrap: break-word; /* 너무 긴 단어도 강제 줄바꿈 */
  overflow-wrap: break-word;
 
   
}  
.mic-active {
  color: red; /* 원하는 색상 */
}

.clickable-level-grade,
.clickable-option,
.clickable-keyword {
    color: #007BFF;               /* 파란색 */
    cursor: pointer;              /* 손가락 커서 */
    text-decoration: underline;   /* 밑줄 */
}

.clickable-level-grade:hover,
.clickable-option:hover,
.clickable-keyword:hover {
    color: #0056b3;               /* hover 시 진한 파랑 */
}
 #include-answer-switch:checked {
    accent-color: #2C9AB7; /* 청록색 */
  }
  
  .example-text {
    cursor: pointer;
    color: #007BFF; /* 파란색 */
    text-decoration: underline;
    display: inline-block;
    margin: 4px 0;
}
.example-text:hover {
    color: #0056b3;
}
.choice-item {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 8px 14px;
    margin: 5px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #f9f9f9;
    text-align: center;
    font-size: 1.2rem;
}
.choice-item.selected {
    background-color: #e6f0ff;
    border-color: #007bff;
}
.qa_buttons {
	border:0px; 
    position: absolute;
    bottom: 5px;
    right: 10px;
    display: flex;
    gap: 5px;
}
.qa_buttons div {
    padding: 3px 6px;
    font-size: 9pt;
    opacity: 1;
    transition: opacity 0.2s;
}
.qa_buttons div:hover {
    opacity: 1;
}

.qa_report {
    background-color: #f0f0f0;
    border: 1px solid #c3c3c3;
    color: #333;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10pt;
    cursor: pointer;
    transition: background 0.2s;
     opacity:0.3;
}
.qa_report:hover {
    background-color: #e9ecef;
    color: #007bff;
     opacity: 1 !important;
}
 .logo-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #unlock-all-types {
  position: relative;
  z-index:10000;
  overflow: hidden;
   width: 100%;
    max-width: 220px;
  background-color: #ffd966; /* 버튼 배경색 */
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

#unlock-all-types:hover {
  transform: scale(1.03);
}

#unlock-all-types::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-25deg);
}

#unlock-all-types:hover::before {
  animation: shine2 0.7s forwards;
}

@keyframes shine2 {
  100% {
    left: 125%;
  }
}



 .unlock-all-types {
  position: relative;
  overflow: hidden;
   width: 100%;
    max-width: 220px;
  background-color: #ffd966; /* 버튼 배경색 */
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.unlock-all-types:hover {
  transform: scale(1.03);
}

.unlock-all-types::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-25deg);
}

.unlock-all-types:hover::before {
  animation: shine2 0.7s forwards;
}

.unlock-all-types2 {
  position: relative;
  overflow: hidden;
    max-width: 110px;
  background-color: #ffd966; /* 버튼 배경색 */
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.unlock-all-types2:hover {
  transform: scale(1.03);
}

.unlock-all-types2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-25deg);
}

.unlock-all-types2:hover::before {
  animation: shine2 0.7s forwards;
}

.unlock-all-types3 {
  position: relative;
  overflow: hidden;
  background-color: #ffd966; /* 버튼 배경색 */
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.unlock-all-types3:hover {
  transform: scale(1.03);
}

.unlock-all-types3::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  transform: skewX(-25deg);
}

.unlock-all-types3:hover::before {
  animation: shine2 0.7s forwards;
}

.locked-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(1);
 background-color: rgba(90,90,90,0.85);     /* 짙은 회색 반투명 */
  color:#fff;                          /* 대비 높은 흰색 텍스트 */
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:8px 16px;
  font-size:14px; font-weight:700; text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  z-index:5;
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;                     /* 반짝임 라인 클리핑 */
  cursor:pointer;                      /* 클릭 유도 (구매 페이지로) */
}
/* 살짝 확대 */
.locked-overlay:hover{
  transform:translate(-50%, -50%) scale(1.04);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
/* 빛 반사 라인 */
.locked-overlay::before{
  content:"";
  position:absolute; top:0; left:-60%;
  width:50%; height:100%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0.0) 100%);
  transform:skewX(-25deg);
  opacity:0; pointer-events:none;
}
/* hover 시 반짝임 */
.locked-overlay:hover::before{
  animation:shine2Locked .7s forwards;
  opacity:1;
}
@keyframes shine2Locked{ 100%{ left:120%; } }

/* ‘이용권’ 강조 색 더 진하게 */
.locked-emph{ color:#FFC400; font-weight:900; }
.unlock-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
.unlock-wrap > .unlock-btn{ pointer-events:auto; }

/* 모바일 전용 규칙 */
@media (max-width: 768px){
  #unlock-all-types{
    display:block;
    box-sizing:border-box;
    width:92vw;          /* 화면 가득 차게 */
    max-width:500px;     /* 너무 넓어지는 것 방지 */
    font-size:1.7rem;
  }
}
.glossy-button {
    position: relative;
    background-color: #2f8d8a;
    color: white;
    border: none;
    font-size: 15pt;
    padding: 10px 0;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.glossy-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    transform: skewX(-25deg);
}

.glossy-button:hover::before {
    animation: shine 1s forwards;
}

  #trial_info:hover, #buy:hover {
    background-color: #10b5b5; /* 약간 더 밝은 색 */
  }
  /* 잠금된 항목 기본 스타일 */
  #selected_ques_nav2 li.locked-item {
    position: relative;         /* 배지 위치 기준 */
    opacity: .75;               /* 살짝 흐리게(선택 불가 느낌) */
    cursor: not-allowed;
  }
  /* 오른쪽 자물쇠 배지 */
  #selected_ques_nav2 li.locked-item .lock-badge {
    position: absolute;
    right: 10px;                /* 필요시 조정 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #F2B01E;             /* 금색 톤 */
    pointer-events: none;       /* 배지 자체는 이벤트 없음 */
  }
  /* 텍스트나 <a>가 배지와 겹치지 않도록 우측 여백 */
  #selected_ques_nav2 li.locked-item > a,
  #selected_ques_nav2 li.locked-item > label {
    padding-right: 28px;        /* 배지 공간만큼 여백 */
  }
   #recommend_coupon{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    cursor: pointer;
    user-select: none;

    transition: transform .12s ease, box-shadow .12s ease;
  }
  #recommend_coupon:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  }
  #recommend_coupon:active{
    transform: translateY(0px) scale(0.98);
  }
   #wish_btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  }
  #wish_btn:active{
    transform: translateY(0px) scale(0.98);
  }
  #recommend_coupon .coupon-badge{
    min-width: 40px;
    height: 40px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 800;
    font-size: 12px;
    color:#fff;
    background: #ff6b00;
  }
  #recommend_coupon .coupon-text .t1{
    font-size: 12px;
    opacity: .75;
    line-height: 1.1;
  }
  #recommend_coupon .coupon-text .t2{
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
  }

  #recommend_toast{
    position: fixed;
    right: 18px;
    bottom: 78px;
    z-index: 999999;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(20,20,20,0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }
  
 /* 버튼 기준값(너 layout에 맞춰 미세조정 가능) */
:root{
  --btnTop: 10px;          /* 잠금/유형선택 버튼 top */
  --btnH: 34px;            /* 버튼 높이(대략) */
  --chipGap: 10px;         /* 칩과 잠금 사이 간격 */
  --lockRight: 160px;      /* lock_ques right 값 */
  --lockW: 100px;          /* lock_ques width 값 */
}

/* ✅ 버튼들은 상단 고정 유지 */
.lock_ques,
.two_sheets{
  top: var(--btnTop) !important;
  transform:none !important;
}

/* ✅ 난이도 칩: '잠금 버튼'의 왼쪽에 자동 배치 + 세로 중앙정렬 */
.level-chip{
  position:absolute;

  right: calc(var(--lockRight) + var(--lockW) + var(--chipGap) + 5px);
  top: calc(var(--btnTop) + (var(--btnH) - 32px)/2);

  transform:none !important;
  margin:0 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:56px;
  height:32px;
  padding:0 14px;

  border-radius:999px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.2px;

  border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  user-select:none;
  z-index:5;
}

/* ✅ 색상 */
.level-chip.lv-concept{ background:#E3F0FF; color:#0B57D0; border-color:#A9CCFF; }
.level-chip.lv-basic  { background:#E6F6EC; color:#137333; border-color:#B4E1C3; }
.level-chip.lv-apply  { background:#FFF1DB; color:#B06000; border-color:#FFD09A; }
.level-chip.lv-adv    { background:#FCE5E3; color:#B3261E; border-color:#F3B3AE; }

/* 모바일 */
@media (max-width: 768px){
  :root{
    --btnH: 36px;
    --lockW: 110px;    /* 모바일에서 버튼 넓어지면 여기만 조정 */
    --chipGap: 10px;
  }
  .level-chip{
    height:34px;
    font-size:16px;
    top: calc(var(--btnTop) + (var(--btnH) - 34px)/2);
  }
}
li[id^="selection"]{ position:relative; } /* ✅ 기준점 */

:root{
  --btnTop: 5px;
  --btnH: 36px;
  --lockRight: 160px;
  --lockW: 100px;
  --chipGap: 15px; /* ✅ 여기서 간격 조절 */
}

li[id^="selection"] .level-chip{
  position:absolute;
  right: calc(var(--lockRight) + var(--lockW) + var(--chipGap));
  top: calc(var(--btnTop) + (var(--btnH) - 32px)/2);

  transform:none !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 12px;
  border-radius:999px;

  font-size:14px;
  font-weight:800;
  z-index:5;
}
/* ✅ 전체 유형 선택 버튼 (난이도순 정렬 왼쪽) */
#lv_select_all_types{
  white-space:nowrap;          /* ✅ 글자 줄바꿈/튀어나옴 방지 */
  min-width:140px;             /* ✅ 버튼 폭 확보 (원하면 150~170까지) */
  padding:7px 14px;
  border:1px solid #e3e3e3;
  border-radius:999px;
  background:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}

#lv_select_all_types:active{ transform: translateY(1px); }

/* ✅ 모바일에서 공간 부족하면 아래줄로 */
@media (max-width: 520px){
  #lv_select_all_types{ min-width:auto; }
}
/* 선택 보기(우측 미리보기) 안에서는 칩을 떠있지 않게 */
#selected_ques_ul .level-chip{
  position: static !important;
  margin-left: 8px;
  display: inline-block;
}
/* ✅ 선택보기(복사된 리스트)에서 제목/칩 정렬 안정화 */
#selected_ques_ul .selected-preview-wrap{
  position: relative; /* (이미 넣었으면 유지) */
}

/* 제목(텍스트 블록) 옆에 칩이 붙는 문제 해결: 칩에 margin */
#selected_ques_ul .selected-preview-wrap .level-chip{
  margin-left: 10px;        /* 제목과 간격 */
  margin-top: 2px;          /* 살짝 아래로 (필요시 0~3px 튜닝) */
  vertical-align: middle;   /* 텍스트 baseline 대신 가운데 */
  display: inline-flex;     /* 내부 텍스트 가운데 정렬을 위한 기반 */
  align-items: center;
}
/* ✅ 칩 내부 텍스트 가운데 */
#selected_ques_ul .selected-preview-wrap .level-chip{
  justify-content: center;   /* inline-flex 가로 중앙 */
  text-align: center;        /* 혹시 inline-flex가 깨질 때 대비 */
  line-height: 1;            /* 폰트 baseline 흔들림 방지 */
  padding: 6px 14px;         /* 좌우 대칭 (기존이 5px/?? 이면 치우쳐보임) */
  min-width: 48px;           /* '개념/기본/응용/심화' 폭 안정 (원하면 조절) */
  box-sizing: border-box;
}
#selected_ques_ul .selected-preview-wrap{
  padding-right: 110px; /* 오른쪽 버튼 영역 비우기(대충) */
}

#selected_ques_ul .selected-preview-wrap .level-chip{
  position: absolute !important;
  top: 0px;
  right: 50px;
  margin: 0 !important;
}
#levelFilterBar{
  position: sticky; /* 이미 sticky면 유지 */
  top: 0;
  z-index: 50;
}
/* 기본: 워터마크는 화면에서 숨김 */
.page .mm-watermark{ display:none; }

/* 워터마크 스타일 */
.page .mm-watermark{
  position:absolute; inset:0;
  z-index:50;
  pointer-events:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
}
.page .mm-watermark img{ width:180px; opacity:.85; }
.page .mm-watermark-text{
  font-size:14px; color:#111;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.08);
  padding:6px 14px;
  border-radius:999px;
  opacity:.92;
}

/* ✅ 인쇄 시 기본 동작: 내용은 블러, 워터마크는 표시 */
@media print{
  .page .mm-content{ filter: blur(1px) !important; }
  .page .mm-watermark{ display:flex !important; }

  /* ✅ 정상 프린트만 예외 */
  body.allow-print .page .mm-content{ filter:none !important; }
  body.allow-print .page .mm-watermark{ display:none !important; }
}
#concept_option_box{
  position:absolute;
  top:8px;
  right:12px;
  z-index:200;

  /* ✅ 플로팅 느낌 제거 */
  background: transparent;
  box-shadow: none;

  /* ✅ 패널 톤에 녹이기 */
  border:none;  
  border-radius: 12px;
  padding:0;

  font-size: 12px;
  color: #444;
}

/* 체크 줄 */
#concept_option_box .concept-check{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  cursor:pointer;
  user-select:none;
  font-weight:600;
}

/* 라디오 영역 */
#concept_option_box .concept-detail{
  display:flex;
  gap:10px;
  margin-top:6px;
  padding-left:18px;
  font-size: 11px;
  color:#666;
}

/* ✅ 여기 중요: 박스 전체를 막지 말고, 라디오만 막기 */
#concept_option_box.is-off .concept-detail{
  opacity:0.35;
  pointer-events:none; /* 라디오만 클릭 불가 */
}