/*
    ************************************ 공통 레이아웃 ************************************
*/

* {padding:0; border:0; margin:0;}
html, body {height:100%; overscroll-behavior: none;}

a {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:none; color:#000000;}
a:link {text-decoration:none; color:#000000;}

ul, ol, dl {list-style: none;}

:focus {outline:none;}



.pageOutWrap {font-family: MaplestoryL; display:block; position:relative; width:100%; height:100%; overflow: hidden; background-size:cover; background-position:center center; background-color:#FEF5EA;}

/*스케일로 리사이징 되는 영역*/
.contentsOutWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    overflow: hidden;
}

body {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); /*모바일에서 하이라이트 안되게 추가해줌.*/
}
/*이미지 드래그 막기위해서*/
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}




/*
    *** 버튼 오버효과
*/
.overEffect {cursor:pointer;}
.overEffect .default {display:block;}
.overEffect .over {display:none;}

.overEffect:hover .default {display:none;}
.overEffect:hover .over {display:block;}



/*
    ********************************************* 컨텐츠 페이지 **********************************************
*/

/*
    *** 전체페이지
*/
.contentAll {display:flex; justify-content: center; align-items: center; height:100%;}
.contentAll > img{width:1120px; height:630px;}


/*
    *** 서브페이지
*/
.subPage {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; background-color:#FEF5EA;}
.subPage .pageImgCell {text-align:center; font-size:0; padding-top:45px; box-sizing: border-box;}
.subPage .pageImgCell img {width:1120px; height:512px;}

.subPage .dragBox {position:absolute; bottom:45px; left:50%; transform:translateX(-50%); margin-left:-21px; width:1161px; height:193px; background-image: url("../images/dragBox.png"); background-size:100% 100%;}


/*
    *** back버튼
*/
.subPage .btnBack {position:absolute; top:30px; left:30px; width:56px; height:38px;}
.subPage .btnBack img {width:100%; height:100%;}


/*
    *** 정답확인, 다시하기버튼
*/
.subPage .btnAnswer,
.subPage .btnRetry {position:absolute; top:519px; left:1060px; width:141px; height:45px;}
.subPage .btnAnswer img,
.subPage .btnRetry img {width:100%; height:100%;}


/*
    *** 드래그 아이템
*/
.subPage .dragItem {
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:10;
    height:45px;
    font-size:28px;
    color:#000000;
    font-family: MaplestoryL;
    text-align:center;
    line-height:1;
    border-radius: 10px;
    border: 2px solid #E57483;
    padding:10px 16px;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
}


/*
    *** 드롭 아이템
*/
.subPage .dropItem {
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:9;
    height:45px;
    font-size:28px;
    color:#000000;
    font-family:MaplestoryL;
    text-align:center;
    line-height:1;
    border-radius: 6px;
    border: 3px solid #AFAFAF;
    box-sizing: border-box;
    background-color:#ffffff;
}

.subPage .dropItem:after {
    content: "?";
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    color: #EBACAC;
    font-family: MaplestoryB;
    font-size: 21px;
    border-radius: 6px;
    border: 3px solid #AFAFAF;
    background-color:#ffffff;
}

.subPage .dropItem.xl,
.subPage .dropItem.xl:after {font-size:24px;}
.subPage .dropItem.lg,
.subPage .dropItem.lg:after {font-size:21px;}
.subPage .dropItem.md,
.subPage .dropItem.md:after {font-size:18px;}
.subPage .dropItem.sm,
.subPage .dropItem.sm:after {font-size:15px;}


.subPage .dropItem.open:after {display:none;}


.subPage .dropItem.correct {color:#3A92FA; pointer-events: none !important;}



/*
    ********************************************* 메뉴 **********************************************
*/
.partMenu {position:absolute; top:30px; right:30px;}
.partMenu .charCell {position:relative; z-index:2; width:105px; height:84px; background-image:url("../images/char_click.png"); background-size:100% 100%; cursor:pointer;}
.partMenu .charCell:hover {background-image:url("../images/char_clickOver.png");}

.partMenu .subArea {
    display:none;
    position:absolute;
    left:50%;
    top:77px;
    transform:translateX(-50%);
    z-index:1;
    width:150px;
    padding:12px;
    border-radius: 20px;
    border: 3px solid #975BFF;
    box-sizing: border-box;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.partMenu .subArea .list {
    font-size:13px;
    color:#ffffff;
    font-family:MaplestoryB;
    text-align:center;
    line-height: 1.3;
    padding:8px 4px;
    border-radius: 20px;
    background: linear-gradient(180deg, #642DD2 0%, #4912A9 100%);
    background-color:#3C067E;
    box-shadow: 0px 3px 0px 2px #3C067E;
    margin-bottom:8px;
    cursor:pointer;
}
.partMenu .subArea .list:last-child {margin-bottom:0;}
.partMenu .subArea .list:hover{
    background: linear-gradient(180deg, #4F14C5 0%, #350B7D 100%);
    box-shadow: 0px 3px 0px 2px #260352;
}


.partMenu.on .charCell:after {content:""; position:absolute; bottom:1px; left:-3px; width:103px; height:92px; background-image: url("../images/char_clickOpen.png"); background-size:100% 100%;}
.partMenu.on .charCell {background-image:none;}

.partMenu.on .subArea {display:block;}



/*
    *************************************** 피드백 팝업 *************************************
*/
.feedbackPopup {position:absolute; top:0; left:0; z-index:100; display:none; justify-content: center; align-items: center; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6);}
.feedbackPopup .feedback {display:none; width:559px; height:420px;}

.feedbackPopup.on {display:flex;}




/*
    *************************************** 폰트 및 글자 지정 *************************************
*/
.fontStix {font-family:Stix; line-height:1; margin-top: 0px;}
.fontStix-N {font-family:Stix-N; line-height:1; margin-top: 0px;}

.textX {display:inline; width:16px; height:16px; font-size:0; background-image:url("../images/textX.png"); background-size:100% 100%;}
.textY {display:inline; width:14px; height:22px; font-size:0; background-image:url("../images/textY.png"); background-size:100% 100%;}
.correct .textX {background-image:url("../images/textX_blue.png");}
.correct .textY {background-image:url("../images/textY_blue.png");}

.md .textX {width:13px; height:13px;}
.md .textY {width:11px; height:18px;}

.sm .textX {width:10px; height:10px;}
.sm .textY {width:9px; height:14px;}

/* 2단원 3번 문제 */
.text_2_3_5 {display:inline; width:62px; height:24.5px; background-image:url("../../chap2/images/3_5_1.svg"); background-size:100% 100%;}
.text_2_3_6 {display:inline; width:78px; height:24.5px; background-image:url("../../chap2/images/3_6_1.svg"); background-size:100% 100%;}
.correct .text_2_3_5 {background-image:url("../../chap2/images/3_5_2.svg");}
.correct .text_2_3_6 {background-image:url("../../chap2/images/3_6_2.svg");}
.md .text_2_3_5 {width: 48px; height: 19px;}
.md .text_2_3_6 {width: 62px; height: 19px;}

/* 4단원 2번 문제 */
.text_4_2_2 {display:inline; width:41px; height:50px; background-image:url("../../chap4/images/2_2_1.svg"); background-size:100% 100%;}
.text_4_2_3 {display:inline; width:41px; height:50px; background-image:url("../../chap4/images/2_3_1.svg"); background-size:100% 100%;}
.text_4_2_4 {display:inline; width:41px; height:50px; background-image:url("../../chap4/images/2_4_1.svg"); background-size:100% 100%;}
.correct .text_4_2_2 {background-image:url("../../chap4/images/2_2_2.svg");}
.correct .text_4_2_3 {background-image:url("../../chap4/images/2_3_2.svg");}
.correct .text_4_2_4 {background-image:url("../../chap4/images/2_4_2.svg");}
.lg .text_4_2_2 {width: 42px; height: 42px;}
.lg .text_4_2_3 {width: 42px; height: 42px;}
.lg .text_4_2_4 {width: 42px; height: 42px;}

/* 6단원 1번 문제 */
.text_6_1_5 {display:inline; width:94px; height:37px; background-image:url("../../chap6/images/1_5_1.svg"); background-size:100% 100%;}
.text_6_1_6 {display:inline; width:117px; height:37px; background-image:url("../../chap6/images/1_6_1.svg"); background-size:100% 100%;}
.correct .text_6_1_5 {background-image:url("../../chap6/images/1_5_2.svg");}
.correct .text_6_1_6 {background-image:url("../../chap6/images/1_6_2.svg");}
.md .text_6_1_5 {width: 48px; height: 19px;}
.md .text_6_1_6 {width: 62px; height: 19px;}


.no-margin-bracket {
    font-variant-east-asian: proportional-widths; 
    font-feature-settings: "palt"; 
}

.no-margin-degree {margin-left: -0.3em; margin-right: -0.3em;}


/*
    *************************************** 수학 식 표현 *************************************
*/
/*
    *** 선분
*/
.lineSeg {border-top:solid 2px #000000; padding-top:2px; line-height:1;}
.correct .lineSeg {border-top-color:#3A92FA;}


/*
    *** 지수
*/
.posStd {position:relative;}
.sup {position:relative; bottom:2ex; font-size:0.45em; font-family:Stix;}


/*
    `*** 분수
*/
.frac {position:relative; display:flex; justify-content: center; align-items: center; flex-direction: column; line-height:1;}
.frac:after {content:""; position:absolute; top:calc(50% - 1px); left:0; width:100%; height:2px; background-color:#000000;}
.frac .top {padding:0 2px; /*padding-bottom:1px;*/}
.frac .bottom {padding:0 2px; padding-top:2px;}

.correct .frac:after {background-color:#3A92FA;}
.sm .frac:after {height: 1px;}
.md .frac:after {height: 1px;}

/*
    `*** 루트
*/
/* 1. 전체 컨테이너: 기호와 숫자를 가로로 나열 */
.math-root {
  display: inline-flex;
  align-items: flex-start; /* 지붕을 기호 상단에 맞춤 */
  font-family: 'Stix', serif; /* 수학적인 느낌의 폰트 */
  font-size: 24px;
  line-height: 1;
  margin-left: -8px;
}

/* 2. 루트 기호 (√) 설정 */
.radical {
  font-size: 1.1em;      /* 기호를 숫자보다 살짝 크게 */
  margin-right: -7px;    /* 중요: 기호와 지붕 사이의 틈을 물리적으로 좁힘 */
  transform: translateY(6.5px); /* 기호의 높이를 지붕 선에 정밀하게 맞춤 */
}

/* 3. 지붕과 숫자 박스 */
.vinculum {
  font-family: 'maplestoryL';
  border-top: 1.5px solid black; /* 지붕 선의 두께와 색상 */
  padding: 2px 2px 0 2px;        /* 지붕과 숫자 사이 간격 (위/오른쪽/아래/왼쪽) */
  margin-top: 0.15em;             /* 기호의 윗부분 높이에 맞춰 선의 위치 조정 */
}