@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
/* *{font-family: 'Pretendard Variable';} */
/* *{font-family: 'HSSaemaul-Regular';} */

@font-face{
	src: url("./assets/fonts/HSSaemaul-Regular.ttf");
    font-family: "Jua"; 
 }
 
 @font-face {
   font-family: 'ONE-Mobile-POP';
   src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

:root {
   --button-color: aqua;
   --first-color: #9E5CAB;
   --second-color: #675098;
   --drawing-Padding: 24px;
  }

body {
   margin: 0;
   overflow: hidden;
}
#three-canvas {
   position: absolute;
   left: 0;
   top: 0;
}


/* 인트로 CSS */
.intro{
   z-index: 999;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 140px;
   display: flex;
   gap: 100px;
   transition: all 0.4s ease-in-out;
   /* display: none; */
}


/* 멀티플레이 UI */
.with{
   z-index: 999;
   position: absolute;
   right: 80px;
   top: 60px;
   cursor: pointer;
}


.rightMove{
   right: -300px;
}


.introDown{
   bottom: -400px;
}

.introButton{
   width: 300px;
   height: 307px;
}

/* 인트로 화면의 버튼들 */
.introStart{
   background-image: url(./images/UI/Button.svg);
   background-size: cover;
   background-position: center;
}
.introLookSave{
   background-image: url(./images/UI/DBButton.svg);
   background-size: cover;
   background-position: center;
}

/* 인트로 화면의 버튼들 */
.carousel{
   position: absolute;
   z-index: 998;
   bottom: -100vh;
   transition: all 0.4s ease-in-out;
   /* background-image: url(./images/UI/Background.png); */
   background-position: center left;
   background-color: #ADE0A7;
}

.background{
   position: absolute;
   width: 110vw;
   height: 100vh;
   background-size: cover;
   background-position: center left;
   pointer-events: none;
}

.background_1{
   background-image: url(./images/UI/Background_1.png);
   z-index: 2;
}
.background_2{
   background-image: url(./images/UI/Background_2.png);
   z-index: -1;
}
.background_3{
   background-image: url(./images/UI/Background_3.png);
   z-index: -2;
}

.carousel_move{
   bottom: 0vh;
}

.showBook{
   width: 300vw;
   height: 100vh;
   left: 0%;
   display: flex;
   transform: translateX(0px);
}

.showBooks{
   width: 100vw;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cards{
   display: flex;
   /* background-color: #47CC47; */
   gap: 30px;
   flex-shrink: 1;
   width: 100%;
   box-sizing: border-box;
   padding: 0px 24px;
   justify-content: center;
}

.showAll{
   color: white;
   position: absolute;
   display: block;
   width: 324px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   height: 83px;
   line-height: var(--button-height);
   font-size: 20px;
   font-weight: 700;
   cursor: pointer;
   z-index: 99;
   transition: all 0.4s ease-in-out;
   bottom: -140px;
   background-image: url(./images/UI/showAll.png);
}

.showBook_info{
   bottom: 60px;
   transform: translateX(-50%);
   left: 50vw;
   position: absolute;
   z-index: 9999;
   display: flex;
   gap: 18px;
}

.showBook_block{
   background-color: #fff;
   width: 24px;
   height: 24px;
   border-radius: 12px;
}

.showBook_block_seleted{
   background-color: #566A53;
   width: 40px;
}

.showBook_num{
   display: flex;
   align-items: center;
   gap: 10px;
}

.showBook_num img{
   width: 20px;
}

.showBook_Button{
   left: 100px;
   width: 200px;
   position: absolute;
}

.showAll_move{
   bottom: 40px;
}

.card{
   position: relative;
   background-image: url(./images/UI/book.png);
   width: 300px;
   height: 436px;
   padding: 70px 40px 0px 60px;
   box-sizing: border-box;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

}
/* .card{
   position: relative;
   background-color: white;
   width: 300px;
   padding: 10px;
   box-sizing: border-box;
   color: #465444;
   border-radius: 30px;
   border: 12px solid #009D68;
   box-shadow: inset 0px -4px 12px #dee8e4, 0px 10px 0px 0px #007A55; Multiple box-shadows
} */

.thum{
   width:100%;
   height: 240px;
   object-fit: cover;
   border-radius: 4px;
   border: solid 4px rgb(235, 244, 235);
   box-shadow: 0px -4px 0px 0px rgb(255, 255, 255), 0px 4px 8px 0px rgba(84, 138, 45, 0.397)
}

.title{
   margin-top: 12px;
   font-size: 32px;
   font-weight: 700;
   margin-left: 6px;
   font-family: ONE-Mobile-POP;
   color: #263826;
   letter-spacing: 2px;

}

.time{
   margin-top: 10px;
   font-size: 24px;
   font-weight: 400;
   margin-left: 6px;

}

.card .trash{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: -60px;
}

/*만약 데이터가 없다면*/
.nonData{
   font-size: 100px;
   font-family: noto sans kr;
   font-weight: 800;
   text-align: center;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translateY(-40px);
   color: #6BB063;
}

/* 인터페이스 CSS */
.interface {
   z-index: 999;
   width: 100%;
   height: 100%;
   position: absolute;
   pointer-events: none;
   box-shadow: 0 0 200px rgba(24, 6, 73, 0.3) inset;
}

/* 시스템 버튼 */
.sys {
   width: 98px;
   height: 98px;
   border-radius: 50%;
   pointer-events: auto;
   cursor: pointer;
   box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.09);
}

.backButton{
   background-image: url(./images/UI/home.png);
   position: absolute;
   left: 60px;
   top: -200px;
   width: 120px;
   height: 125px;
   z-index: 999;
   transition: all 0.4s ease-in-out;
}

.introBackButton{
   top: 60px;
}

.drawButton, .drawButton_emotion{
   left: 60px;
   bottom: 60px;
   position: absolute;
   display: flex;
   gap: 16px;
   border-radius: 100px;
   transition: all 0.3s ease-in-out;
}

.drawButton{
   padding: 12px;
}

.drawButton_move{
   bottom: -160px;
}

.draw{
   border-radius: 50%;
   width: 86px;
   height: 86px;
   background-color: rgb(255, 255, 255);
   pointer-events: auto;
   cursor: pointer;
   box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.09);
}

.moveStart{
   left: 50%;
   transform: translateX(-50%);
   font-size: 20px;
   text-align: center;
   line-height: 98px;
   bottom: -160px;
   position: absolute;
   height: 83px;
   color: white;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   background-image: url(./images/UI/DrawNext.png);
   pointer-events: auto;   
}

/*녹화시 다음으로 가는 버튼과, 동화 재생시 버튼을 묶어놓은 UI*/
.recordRap, .playRap{
   left: 50%;
   transform: translateX(-50%);
   bottom: -160px;
   position: absolute;
   border-radius: 100px;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   display: flex;
   gap: 12px;
   cursor: pointer;
}

.recordNext, .recordPrev{
   font-size: 20px;
   line-height: 98px;
   width: 281px;
   height: 99px;
   border-radius: 100px;
   color: white;
   font-weight: 600;
   pointer-events: auto;
   cursor: pointer;
   background-image: url(./images/UI/prev.png);
}

.playNext{
   font-size: 20px;
   line-height: 98px;
   width: 264px;
   height: 117px;
   border-radius: 100px;
   color: white;
   font-weight: 600;
   pointer-events: auto;
   cursor: pointer;
   background-image: url(./images/UI/playNext.png);
}

.recordNext{
   background-image: url(./images/UI/next.png);
}

.recordDone{
   background-image: url(./images/UI/makeDone.png);   
}

.moveStart_move{
   bottom: 80px;
}

.moveStart_noneVisible{
   display: none;
}


/* 사람그리는 버튼 */
.drawHuman{
   background-image: url(./images/UI/Human.png);
   width: 120px;
   height: 125px;
}
.drawStuff{
   background-image: url(./images/UI/apple.png);
   width: 120px;
   height: 125px;
}
.drawHome{
   background-image: url(./images/UI/house.png);
   width: 120px;
   height: 125px;
}
.editEmotion{
   background-image: url(./images/UI/emotion.png);
   width: 120px;
   height: 125px;
}


.step{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   top: 60px;
   align-items: center;
   width: 220px;
   justify-content: space-between;
}

.dot{
   transform: scale(1.0);
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: rgb(191, 191, 191);
   border: 3px solid rgb(255, 255, 255);
   position: relative;
   box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.09);
}

.dot.active{
   transform: scale(1.2);
   background-color: rgb(255, 215, 122);
   border: 3px solid rgb(255, 255, 255);
}

.dot.done{
   transform: scale(1.0);
   background-color: rgb(82, 174, 70);
   border: 3px solid rgb(216, 255, 171);
}

/* .dot>div{
   position: absolute;
   width: 20px;
   height: 20px;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   background-color: #7DB876;
   z-index: 99;
   border-radius: 50%;
} */

/* 오른쪽 컨트롤 버튼 */
.controlButton {
   position: absolute;
   right: 80px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 26px;
   transition: all 0.3s ease-in-out;
   pointer-events: none;
}

.controlButton .play{
   width: 98px;
   height: 102px;
   background-image: url(./images/UI/play.png);
}

.controlButton .reuse{
   width: 98px;
   height: 102px;
   background-image: url(./images/UI/return.png);
}


/* 오른쪽 그림판 */
.miniBack{
   padding: 10px;
   background-color: #F5F5F5;
   background-repeat: no-repeat;
   width: 70px;
   height: 70px;
   background-position: 50%;
   background-image: url(./images/UI/back.png);
   position: absolute;
   top: 70px;
}
.miniBack.left{
   left: -90px;
   border-radius: 70px 0px 0px 70px;
}
.miniBack.right{
   right:-90px;
   border-radius: 0px 70px 70px 0px;
}

.drawing,.building,.stuff{
   right: 0;
   box-sizing: border-box;
   width: 430px;
   height: 100%;
   background-color: #F5F5F5;
   position: absolute;
   z-index: 9999;
   top: 0px;
   padding: var(--drawing-Padding);
   transition: all 0.2s ease-in-out;
   box-shadow: rgba(0, 0, 0, 0.068) 0px 0px 40px;
   display: flex;
   flex-direction: column;
}

.leftMove{
   right: -590px;
}


/* 건물 설치하는 UI */

.building {
   background-color: rgb(247, 247, 247);
   overflow: scroll;
}

.dragable{
   align-content: center;
}

.buildingList{
   margin-bottom: 12px;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 10px;
   row-gap: 10px;
}

.buildingBox{
   height: 300px;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   
   background-image: url(./images/UI/NoneHouse.png);
   background-position: center;
   background-size: 60%;
   background-repeat: no-repeat;

}

.buildingBox:nth-child(1){
   background-image: url(./images/UI/houseImg.png);
   background-position: center;
   background-size: 130%;
   background-repeat: no-repeat;

   pointer-events:all ;
}


#p5-container{
   background-size: 90%;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url(./images/UI/backHuman.png);
}

.size, .size2{
   /* background-color: aqua; */
   display: flex;
   padding: 20px 0px;
   justify-content: space-between;
   margin-bottom: 20px;
   /* margin-top: 20px; */
   border-bottom: 2px #DFDFDF solid;
}

.color, .color2{
   display: grid;
   flex-wrap: wrap;
   gap: 14px;
   grid-template-columns: repeat(5, 1fr);
}

.cButton{
   width: 62px;
   height: 62px;
   border-radius: 50%;
   position: relative;
   border: 1px solid #CDCDCD;
   box-sizing: border-box;
}

.cButton.active{
   border: 2px solid #5f5f5f;
}

.cButton div{
   width: 62px;
   height: 62px;
   border-radius: 50%;
   pointer-events: none;
}

.size .cButton{
}

.size .cButton div,.size2 .cButton div{
   background-color: #7DB876;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

.size .cButton:nth-child(1) div,.size2 .cButton:nth-child(1) div{
   width: 10px;
   height: 10px;
}
.size .cButton:nth-child(2) div,.size2 .cButton:nth-child(2) div{
   width: 18px;
   height: 18px;
}
.size .cButton:nth-child(3) div,.size2 .cButton:nth-child(3) div{
   width: 28px;
   height: 28px;
}
.size .cButton:nth-child(4) div,.size2 .cButton:nth-child(4) div{
   width: 36px;
   height: 36px;
}

.color .cButton div,.color2 .cButton div{
   left: 50%;
   top: 50%;
   position: absolute;
   transform: translate(-50%,-50%);
   width: 50px;
   height: 50px;
}

.color .cButton:nth-child(1) div,.color2 .cButton:nth-child(1) div{background-color:#FA2B2D;}
.color .cButton:nth-child(2) div,.color2 .cButton:nth-child(2) div{background-color:#FF9700;}
.color .cButton:nth-child(3) div,.color2 .cButton:nth-child(3) div{background-color:#ffee00;}
.color .cButton:nth-child(4) div,.color2 .cButton:nth-child(4) div{background-color:#47CC47;}
.color .cButton:nth-child(5) div,.color2 .cButton:nth-child(5) div{background-color:#000000;}
.color .cButton:nth-child(6) div,.color2 .cButton:nth-child(6) div{background-color:#8008FF;}
.color .cButton:nth-child(7) div,.color2 .cButton:nth-child(7) div{background-color:#007CFF;}
.color .cButton:nth-child(8) div,.color2 .cButton:nth-child(8) div{background-color:#00AAEF;}
.color .cButton:nth-child(9) div,.color2 .cButton:nth-child(9) div{background-color:#01BFC9;}
.color .cButton:nth-child(10) div,.color2 .cButton:nth-child(10) div{background-color:#fff;}



/* 보내는 버튼 */
:root {
   --button-height: 56px;
  }

.sendButtons{
   position: absolute;
   bottom: 24px;
   z-index: 99;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.sendButton,.sendButton2{
   color: white;
   display: block;
   width: 382px;
   text-align: center;
   height: 83px;
   line-height: var(--button-height);
   font-size: 20px;
   font-weight: 700;
   cursor: pointer;
}

.come{
   bottom: 140px;
   background-image: url(./images/UI/DrawDone.png);
}

.delete{
   bottom: 50px;
   background-image: url(./images/UI/DrawDone2.png);
}

.button{
   color: white;
   position: absolute;
   display: block;
   width: 324px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   height: 83px;
   cursor: pointer;
   z-index: 99;
}



/* 튜토리얼 */
.tutorial{
   z-index: 1000;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: #F8FBFD;
   border-radius: 24px;
   font-size: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
   padding: 64px;
   gap: 20px;
   box-shadow: 0px 10px 0px 0px rgb(195, 198, 190);
}

.tutorial > .img{
   width: 430px;
   height: 240px;
   background-image: url("");
   background-size: cover;
   background-position: center;
}

.tutorial p{
   font-family: Pretendard;
   font-weight: 700;
   font-size: 36px;
   color: #1e1e1e;
}
.tutorial img{}
.tutorial h2{
   font-family: Pretendard;
   font-weight: 700;
   font-size: 50px;
   color: #7DB876;
}
.tutorial span{
   font-family: Pretendard;
   font-size: 24px;
   color: #888888;
   font-weight: 500;
}
.tutorial .together{
   background-image: url(images/UI/together.png);
}
.tutorial .maxNumber{
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: center;
   margin-top: -30px;
}

.namemake{
   z-index: 999;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-color: #00000067;
   font-size: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
   padding: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.namearea{
   font-family: "pretendard";
   width: 560px;
   height: 40px;
   font-size: 56px;
   padding: 24px;
   border:none;
   text-align: center;
   color: rgb(37, 37, 37);
   background-color: #F8FBFD;
}

.namearea::placeholder{
   color: rgb(224, 224, 224);
}

input:focus { outline: none; }

.titleButton{
   color: white;
   display: block;
   width: 324px;
   text-align: center;
   height: 83px;
   line-height: var(--button-height);
   font-size: 20px;
   font-weight: 700;
   cursor: pointer;
   z-index: 99;
   margin-top: 40px;
   background-color: #F8FBFD;
   background-image: url(./images/UI/Name.png);
}

.animation-fadein{
   animation: fadein 0.2s ease; 
}
.animation-easeUp{
   animation: easeUp 0.5s ease-out;
}
.animation-shake{
   animation: shake 0.4s ease-in-out;
}

.profile{
   position: absolute;
   right: 80px;
   top: 60px;
   width: 220px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100px;
   z-index: 100;
}

.profile1,.profile2{
   width: 100px;
   height: 100px;
   background-image: url(./images/UI/kid1.png);
   border-radius: 50%;
   background-position: center;
   background-size: cover;
}

.profile2{
   background-image: url(./images/UI/kid2.png);
}


.playWith{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 24px;
   width: 600px;
   height: 740px;
   font-size: 30px;
   text-align: center;
}

.playWithButton, .playWithButton2, .playWithButton3{
   font-family: "pretendard";
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   background-color: #7DB876;
   gap: 12px;
   width: 100%;
   font-weight: 700;
   color: white;
   border-radius: 18px;
   cursor: pointer;
   flex-direction: column;
}

.playWithButton2{
   background-color: #76B8A4;
}
.playWithButton3{
   background-color: #769CB8;
}


.code{
   background-color: white;
   padding: -20px;
}
.codeMake{
   width: 600px;
   height: 600px;
   background-image: url(./images/UI/code.png);
   background-position: center;
   background-size: cover;
   background-color: white !important;
}

.emotion{z-index: 1;}

.emotion_inner, .emotion_inner_defult{
   position: absolute;
   display: flex;
   padding: 20px;
   background-color: #2a2a2a;
   border-radius: 12px;
   gap: 12px;
   transition: all 0.4s;
   transition-timing-function: cubic-bezier(0.730, 0.080, 0.080, 1.195);
}

.emotion_inner{
   transform: translate(-50%, -50%) scale(0%);
}
.emotion_inner_defult{
   transform: translate(-50%, -50%) scale(0%);
}

.animation_emotion{
   transform: translate(-50%, -50%) scale(100%);
}
.animation_emotion2{
   transform: translate(-50%, -50%) scale(0%);
}

.emotion img{
   flex: 1;
   width: 80px;
}


@keyframes fadein {
   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }
}

@keyframes easeUp {
   from {
      transform: translate(-50%, 100%);
   }
   to {
      transform: translate(-50%, -50%);
   }
}


@keyframes runRight {
   to {
     margin-left: 90%;
     background-color: #ff7675;
   }
 }
 
 @keyframes runLeft {
   to {
     margin-left: 0;
     background-color: #dff9fb;
   }
 }
 
 .run {
   animation-fill-mode: forwards;
   animation-name: runRight, runLeft;
   animation-delay: 0s, 3s;
   animation-duration: 3s, 12s;
   animation-timing-function: ease-in, ease-in-out;
 }


@keyframes shake {
   0%{
   }
   20%{
      transform: scale(105%) rotate(6deg) translateY(-5px);
   }
   40%{
      transform: scale(105%) rotate(-6deg) translateY(-5px);
   }
   60%{
      transform: scale(105%) rotate(6deg) translateY(-5px);
   }
   80%{
      transform: scale(105%) rotate(-6deg) translateY(-5px);
   }
   100%{
   }
}

/* 이모션 */


.displayNone{display: none;}
.displayBlock{display: block;}