body { padding: 0; margin: 0; }

body,html { width: 100%; height: 100vh; overflow: hidden;}

.contentWrap { position: absolute; width: 100%; max-width: 920px; height: 400px; overflow: hidden; transform-origin: top left;}

.page { position: relative; display: flex; align-items: center; justify-content: center; gap: 123px;  }

.button { width:100px; height: 35px; color: #232426; font-size: 16px; font-family: 'SUIT-B'; border: 1px solid #b0b6c0; border-radius: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.button.on { background: #ffb400; border: none; }

.resetButton { margin-bottom: 10px; }

/**************드래그 하는 영역****************/
.dragArea { display: flex; align-items: center; flex-direction: column; justify-content: center;}
/*드래그할 물체 선택박스*/
.dragArea .selectBox { display: flex; align-items: center; justify-content: center; gap: 24px; width: 317px; height: 104px; border-radius: 8px; border: 4px solid #fcdca3; }
.dragArea .selectBox .object img { width: 69px; }

.dragArea .selectBox .object { position: relative; cursor: pointer; }
.dragArea .selectBox .object1.on:before { position: absolute; content: ''; background: url("../images/obj1_1_on.png")no-repeat; width: 68px; height: 68px; background-size: 68px 68px; }
.dragArea .selectBox .object2.on:before { position: absolute; content: ''; background: url("../images/obj2_1_on.png")no-repeat; width: 71px; height: 71px; background-size: 71px 71px; }
.dragArea .selectBox .object3.on:before { position: absolute; content: ''; background: url("../images/obj3_1_on.png")no-repeat; width: 71px; height: 70px; background-size: 71px 70px; }

.dragArea .arrow img { width: 33px; }

/*드래그아이템들 모아놓은 박스*/
.dragArea .dragBox { position: relative; width: 366px; height: 104px; border-radius: 8px; border: 4px solid #fcdca3; margin-bottom: 10px; }

.dragArea .dragBox .dragWrap { display: none; }
.dragArea .dragBox .dragWrap .dragItem { position: relative; z-index: 2; }
.dragArea .dragBox .dragWrap .dragItem {  position: absolute; left: 28px; top: 50%; margin-top: -34px; }
.dragArea .dragBox .dragWrap .dragItem2 { left: 107px; }
.dragArea .dragBox .dragWrap .dragItem3 { left: 186px; }
.dragArea .dragBox .dragWrap .dragItem4 { left: 265px; }
.dragArea .dragBox .dragWrap3 .dragItem1 { left: 107px; }
.dragArea .dragBox .dragWrap3 .dragItem2 { left: 186px; }

.dragArea .dragBox .dragWrap .dragItem img { width: 69px;}


    /**************드롭되는 영역****************/

.dropArea { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
.dropArea .topArea { display: flex; align-items: flex-end; gap: 10px;}

/*드롭물체*/
.dropArea .dropWrap { position: relative; background: url("../images/dropArea.png")no-repeat; width: 280px; height: 280px; background-size: 280px 280px; }
.dropArea .dropWrap .dropItem { position: absolute; width: calc(100% /4); width: 70px; height: 70px; }
.dropArea .dropWrap .dropItem2 { left: 70px; }
.dropArea .dropWrap .dropItem3 { left: 140px; }
.dropArea .dropWrap .dropItem4 { left: 210px; }
.dropArea .dropWrap .dropItem5 { top: 70px; }
.dropArea .dropWrap .dropItem6 { top: 70px; left: 70px; }
.dropArea .dropWrap .dropItem7 { top: 70px; left: 140px; }
.dropArea .dropWrap .dropItem8 { top: 70px; left: 210px; }
.dropArea .dropWrap .dropItem9 { top: 140px; }
.dropArea .dropWrap .dropItem10 { top: 140px; left: 70px; }
.dropArea .dropWrap .dropItem11 { top: 140px; left: 140px; }
.dropArea .dropWrap .dropItem12 { top: 140px; left: 210px; }
.dropArea .dropWrap .dropItem13 { top: 210px;  }
.dropArea .dropWrap .dropItem14 { top: 210px; left: 70px; }
.dropArea .dropWrap .dropItem15 { top: 210px; left: 140px; }
.dropArea .dropWrap .dropItem16 { top: 210px; left: 210px; }

.dropArea .dropWrap .dropItem.on:hover:before { content: 'x'; position: absolute; top: -5px; right: 5px; color: #000; font-size: 20px; }



.dropArea .dropWrap .dropItem img { width: 69px; }
.dropArea .dropWrap .dropItem.on { -webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none; }

/*화살표*/
.rightArrow { position: absolute; left: 400px; top: 180px;}
.rightArrow img { width: 85px; height: 53px; }



/**************완성된 페이지****************/

.inputWrap { display: none; }
.inputWrap .artWork { display: flex; align-items: center; border: 2px solid #52879e; border-radius: 8px; padding: 0 7px; box-sizing: border-box; }
.inputWrap .artWork.artInfo {align-items: flex-start; padding-top:10px; box-sizing: border-box;}
.inputWrap .artWork .title { font-size: 15px; font-family: 'cookieRun-R'; background: #52879e; color: #fff; border-radius: 30px; padding: 4px 10px; }

.inputWrap .artWork.artTitle { width: 400px; height: 50px; margin-bottom: 5px; }
.inputWrap .artWork.artInfo { width: 400px; height: 225px; }

.inputWrap .artWork input { border: none; flex: 1; font-family: 'SCDream5'; padding: 0 7px; box-sizing: border-box; font-size: 16px; }
.inputWrap .artWork input:focus { outline: none; }
.inputWrap .artWork textarea { border: none; resize: none; flex: 1; height: 200px;  font-family: 'SCDream5'; padding: 0 7px; box-sizing: border-box; font-size: 16px; }
.inputWrap .artWork textarea:focus { outline: none; }