@charset "utf-8";

#header {
  background-color: #fff4bd;
  box-shadow: 0px 15px 100px 0px rgba(255, 185, 53, 0.32);
}

#headerInfo .mode {
  background-image: url(../img/header_mode.png);
}
#headerInfo .mode::before {
  content: '게임';
}
#headerBtns .btn_test {
  background-color: #f7a82d;
  box-shadow: 0px 4px 0px 0px rgb(226, 148, 27), inset 0px -3px 7px 0px rgba(226, 148, 27, 0.5);
}
#headerBtns .btns {
  background-image: url(../img/header_btn_bg4.png) !important;
}
[data-env='server'].student #headerBtns .btns {
  background-image: url(../img/header_btn_bg2.png);
}
#btnModeChange {
  background-color: #fab332;
}
#loading .ld_bar {
  background: linear-gradient(to right, #ff8400, #fbae00);
}
#loading .ld_bar .pen {
  background-image: url(../img/ic_pencil.png);
}
#loading .ld_txt > strong::before {
  background: #fe9e16;
}
#lsList .box {
  border-color: rgba(252, 183, 45, 0.35);
  background-color: #fff9ef;
}
#lsList .box:hover {
  border-color: #fcb72d;
}
#lsList .box .ls_num {
  background-image: url(../img/ls_list_mark.png);
}
#lsList .box .thumb::before {
  background: linear-gradient(to right, rgba(255, 249, 239, 0), rgba(255, 249, 239, 1));
}
#lsList .box .btn_vocab {
  background-color: #fab100;
  box-shadow: 0px 6px 0px 0px rgba(200, 118, 0, 1), inset 0px 3px 7px 0px rgba(200, 118, 0, 0.5);
}
#lsList .box .btn_vocab:active,
#lsList .box .btn_vocab:focus {
  background-color: #ff622b;
  box-shadow: 0px 6px 0px 0px rgba(163, 96, 0, 1), inset 1.721px 2.457px 7px 0px rgba(163, 96, 0, 0.5);
}
#cateList {
  background: #fff1af;
}
#cateList .btns {
  background-color: #fab332;
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(246, 145, 0, 0.15), inset 0px 2px 5px 0px rgba(246, 145, 0, 0.15);
  /* background-image: url(../img/header_btn_bg3.png); */
}
#cateList .cate_wrap {
  background-color: rgba(246, 144, 0, 0.18);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(246, 145, 0, 0.15), inset 0px 2px 5px 0px rgba(246, 145, 0, 0.15);
  padding: 95px 50px 62px;
}

#cateList .mode_title {
  background: url(../img/mode_title.png) no-repeat center / 100%;
}

#cateList .cate_card {
  width: 260px;
}

#cateList .cate_card.on {
  background-color: #ff622b;

  box-shadow: 0px 4px 0px 0px rgba(100, 51, 6, 1), 0 10px 30px rgba(102, 51, 0, 0.55), inset 0px 3px 7px 0px rgba(100, 51, 6, 0.5);
}

#cateList .cate_card + .cate_card {
  margin-left: 20px;
}
#cateList .cate_card.on > p > span {
  color: #80420b;
}
#cateList .btn_study {
  background-color: #ff622b;
  box-shadow: 0px 8px 0px 0px rgba(61, 35, 0, 1), inset 0px 3px 7px 0px rgba(61, 35, 0, 0.5);
}

#cateList .btn_study:focus,
#cateList .btn_study:active {
  box-shadow: 0px -8px 0px 0px rgba(213, 156, 54, 1), inset 3px 7px 0px 0px rgba(61, 35, 0, 1);
}

.page {
  background-color: #fff1af;
}
.page.result {
  background: url(../img/result.png) no-repeat center / 100%;
}

.game_ct .btn_next {
  background: url(../img/page_next.png) no-repeat center / 100%;
}
.game_ct .btn_next.on {
  background-image: url(../img/page_next_on.png);
}
.game_bt .page_info * {
  color: rgb(221, 149, 32);
}

.page.result #btnFull {
  background-color: rgba(246, 145, 0, 0.2);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(246, 145, 0, 0.15), inset 0px 2px 5px 0px rgba(246, 145, 0, 0.15);
}

/* OX 게임 */
#gameOX .game_title > i {
  position: relative;
  top: 6px;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(../img/txt_O.png) no-repeat center / 100%;
}
#gameOX .game_title > i.incorrect {
  background-image: url(../img/txt_X.png);
}
#gameOX .game_card {
  background: url(../img/ox_bg.png) no-repeat center / 100%;
}
#gameOX .sentence {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gameOX .sentence > p {
  font-weight: 700;
  font-size: 94px;
  color: rgb(0, 0, 0);
  line-height: 1.245;
  padding: 48px 140px;
  vertical-align: middle;
  word-break: keep-all;
}
#gameOX .sentence.sm > p {
  font-size: 74px;
}

#gameOX .answer_btns {
  width: 100%;
  height: 288px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gameOX .answer_btns > button {
  position: relative;
  width: 180px;
  height: 188px;
  background: url(../img/btn_O_normal.png) no-repeat center / 100%;
}
#gameOX .answer_btns > button.incorrect {
  background-image: url(../img/btn_X_normal.png);
  margin-left: 250px;
}
#gameOX .answer_btns > button.select {
  background-image: url(../img/btn_O_active.png);
}
#gameOX .answer_btns > button.incorrect.select {
  background-image: url(../img/btn_X_active.png);
}
#gameOX .answer_btns > button::before {
  content: '';
  position: absolute;
  top: -36px;
  left: 6px;
  width: 111px;
  height: 88px;
  background: url(../../../common/img/icon_answer.png) no-repeat center / 100%;
  display: none;
}
#gameOX .answer_btns > button.select::before {
  display: block;
}

#gameCard .game_card,
#gameSpFind .game_card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 65px 72px;
  justify-content: space-between;
}

#gameCard .game_card .card,
#gameSpFind .game_card .card {
  position: relative;
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 6px 0px 0px rgba(218, 220, 232, 1), inset 0px -3px 7px 0px rgba(218, 220, 232, 0.5);
  width: 360px;
  min-height: 150px;
  border: 2px solid #ccccdd;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.125;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  cursor: pointer;
}
#gameCard .game_card .card.sm {
  font-size: 32px;
}

#gameCard .game_card .card.select,
#gameCard .game_card .card.on,
#gameCard .game_card .card.correct {
  border-color: #018174;
  background-color: rgb(0, 160, 143);
  box-shadow: 0px 6px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
  color: rgb(255, 255, 255);
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  pointer-events: none;
}

#gameCard .game_card .card:nth-child(n + 5) {
  margin-top: 42px;
}
#gameCard .game_card .card.correct::before,
#gameSpFind .game_card .card.correct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/particle1.png) no-repeat center / 100%;
}
#gameCard .game_card .card.incorrect,
#gameSpFind .game_card .card.incorrect {
  color: rgb(255, 255, 255);
  border-color: #cf1855;
  background-color: rgb(255, 30, 104);
  box-shadow: 0px 6px 0px 0px rgba(207, 24, 85, 1), inset 0px -3px 7px 0px rgba(207, 24, 85, 0.5);
  animation: shake 0.3s ease-in-out 3;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

#gameCard .game_card .card.disabled {
  background-color: rgb(216, 218, 230);
  box-shadow: 0px 6px 0px 0px rgba(190, 191, 212, 1), inset 0px -3px 7px 0px rgba(190, 191, 212, 0.5);
  color: rgba(65, 65, 70, 0.6);
}

#gameSpArr .game_card {
  position: relative;
  z-index: 5;
  height: 654px;
  background: url(../img/sp_arr_bg.png) no-repeat center / 100%;
}
#gameSpArr .btn_reset {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 90px;
  height: 94px;
  background: url(../img/btn_reset.png) no-repeat center / 100%;
}
#gameSpArr .question {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#gameSpArr .question .mean {
  font-size: 94px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.245;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
#gameSpArr .que_btns {
  width: 100%;
  height: 169px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#gameSpArr .que_btns > button {
  width: 75px;
  height: 80px;
  font-size: 55px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  line-height: 0.945;
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: rgb(0, 188, 137);
  box-shadow: 0px 4px 0px 0px rgba(0, 153, 112, 11), inset 0px 3px 7px 0px rgba(0, 153, 112, 0.5);
}
#gameSpArr .que_btns > button.off {
  height: 84px;
  background: #ffe17e;
  box-shadow: none;
  text-indent: -9999px;
  pointer-events: none;
}
#gameSpArr .que_btns > button + button {
  margin-left: 20px;
}
#gameSpArr .answer_btns {
  width: 100%;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
#gameSpArr .answer_btns > button {
  border: 2px solid rgb(202, 202, 202);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 0px 0px rgba(202, 202, 202, 1), inset 0px 3px 7px 0px rgba(202, 202, 202, 0.5);
  width: 71px;
  height: 76px;
  z-index: 571;
  font-size: 50px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 0.678;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gameSpArr .answer_btns > button.off {
  border-color: rgb(190, 191, 212);
  background-color: rgb(216, 218, 230);
  box-shadow: 0px 4px 0px 0px rgba(190, 191, 212, 1), inset 0px 3px 7px 0px rgba(190, 191, 212, 0.5);
  pointer-events: none;
  text-indent: -9999px;
}
#gameSpArr .answer_btns.finish > button {
  background: #e7d1ae;
  box-shadow: inset 0px 2px 10px 0px rgba(182, 150, 51, 0.25);
  border: none;
  pointer-events: none;
  text-indent: -9999px;
}
#gameSpFind .game_card {
  padding: 60px 72px;
}
#gameSpFind .game_card .card {
  position: relative;
  width: 480px;
  font-size: 45px;
}
#gameSpFind .game_card .card.center {
  border-color: #aed7c4;
  background-color: rgb(229, 244, 229);
  box-shadow: 0px 6px 0px 0px rgba(174, 215, 196, 1), inset -1.545px -2.572px 7px 0px rgba(0, 162, 119, 0.15);
  color: #008275;
  pointer-events: none;
  font-size: 55px;
}
#gameSpFind .game_card .card.correct {
  border-color: #018174;
  background-color: rgb(0, 160, 143);
  box-shadow: 0px 6px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
  color: rgb(255, 255, 255);
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
}
#gameSpFind .game_card .card.correct::before {
  /* background: url(../img/particle2.png) no-repeat center / 100%; */
  display: none;
}
#gameSpFind .game_card .card:nth-child(n + 4) {
  margin-top: 44px;
}
#gameSpFind .game_card .card .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
/* 튜토리얼 팝업 */
.tutorial.game_ox .pop.p1 .txt {
  top: 477px;
  left: 580px;
  width: 699px;
  height: 477px;
  background: url(../img/game_ox_tu1.png) no-repeat center / 100%;
  padding: 56px 0 0 265px;
}
.tutorial.game_ox .pop.p1 .ani1 {
  position: absolute;
  top: 729px;
  left: 551px;
}
.tutorial.game_ox .pop.p2 .txt {
  top: 316px;
  left: 653px;
  width: 564px;
  height: 577px;
  background: url(../img/game_ox_tu2.png) no-repeat center / 100%;
  padding: 84px 0 0 180px;
}

.tutorial.game_ox .success {
  margin-top: 36px;
}

.tutorial.game_card .pop.p1 .txt {
  top: 354px;
  left: 107px;
  width: 773px;
  height: 402px;
  background: url(../img/game_card_tu1.png) no-repeat center / 100%;
  padding: 31px 0 0 452px;
}
.tutorial.game_card .pop.p1 .ani1 {
  position: absolute;
  top: 530px;
  left: 86px;
}
.tutorial.game_card .pop.p2 .txt {
  top: 546px;
  left: 888px;
  width: 773px;
  height: 408px;
  background: url(../img/game_card_tu2.png) no-repeat center / 100%;
  padding: 31px 0 0 452px;
}
.tutorial.game_card .pop.p2 .ani2 {
  position: absolute;
  top: 720px;
  left: 870px;
}
.tutorial.game_card .pop.p3 .txt {
  top: 356px;
  left: 191px;
  width: 1146px;
  height: 533px;
  background: url(../img/game_card_tu3.png) no-repeat center / 100%;
  padding: 80px 0 0 30px;
}
.tutorial.game_card .pop.p3 .ani3 {
  position: absolute;
  top: 515px;
  left: 157px;
  width: 433px;
}
.tutorial.game_card .pop.p3 .ani3:nth-of-type(2) {
  top: 706px;
  left: 941px;
}
.tutorial.game_card .card {
  position: absolute;
  top: 539px;
  left: 195px;
  width: 360px;
  height: 150px;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial.game_card .card.c2 {
  top: 731px;
  left: 976px;
  color: #fff;
  font-size: 42px;
}
.tutorial.game_card .pop.p3 .card {
  color: #fff;
}

.tutorial.game_card .success {
  margin-top: 34px;
}
.tutorial.game_card .success::after {
  width: 142px;
}

.tutorial.game_sp_arr .pop.p1 {
  background: url(../img/game_sp_arr_tu1_1.png) no-repeat 635px 583px / 849px 418px;
}

.tutorial.game_sp_arr .pop.p1 .ani1 {
  position: absolute;
  top: 811px;
  left: 788px;
  animation: moveGameSpAni1 1.5s linear 0.5s 2 forwards;
}

@keyframes moveGameSpAni1 {
  0% {
    top: 811px;
    left: 788px;
  }
  80% {
    top: 592px;
    left: 503px;
  }
  100% {
    top: 592px;
    left: 503px;
  }
}

.tutorial.game_sp_arr .pop.p3 {
  background: url(../img/game_sp_arr_tu3_1.png) no-repeat 164px 311px / 1543px 607px;
}
.tutorial.game_sp_arr .txt {
  position: absolute;
}
.tutorial.game_sp_arr .pop.p1 .txt.t1 {
  top: 637px;
  left: 1123px;
}
.tutorial.game_sp_arr .pop.p1 .txt.t2 {
  top: 662px;
  left: 1052px;
}
.tutorial.game_sp_arr .pop.p2 .txt.t1 {
  top: 628px;
  left: 733px;
  width: 615px;
  height: 269px;
  background: url(../img/game_sp_arr_tu2_1.png) no-repeat center / 100%;
  padding: 32px 0 0 84px;
}
.tutorial.game_sp_arr .pop.p2 .txt.t2 {
  top: 409px;
  left: 638px;
  width: 617px;
  height: 267px;
  background: url(../img/game_sp_arr_tu2_2.png) no-repeat center / 100%;
  padding: 34px 0 0 86px;
}
.tutorial.game_sp_arr .pop.p2 .ani1 {
  position: absolute;
  top: 777px;
  left: 571px;
}
.tutorial.game_sp_arr .pop.p2 .ani2 {
  top: 556px;
  left: 491px;
}
.tutorial.game_sp_arr .pop.p3 .txt.t1 {
  top: 774px;
  left: 235px;
}
.tutorial.game_sp_arr .pop.p3 .txt.t2 {
  top: 311px;
  left: 1293px;
  width: 414px;
  height: 320px;
  background: url(../img/game_sp_arr_tu3_2.png) no-repeat center / 100%;
  padding: 80px 0 0 28px;
}
.tutorial.game_sp_arr .pop.p3 .spell {
  position: absolute;
  top: 592px;
  left: 639px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.tutorial.game_sp_arr .pop.p3 .spell > span {
  width: 75px;
  height: 84px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 55px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  line-height: 1;
}

.tutorial.game_sp_arr .pop.p3 .spell.correct > span:nth-child(6) {
  order: 1;
}
.tutorial.game_sp_arr .success {
  margin-top: 35px;
}

.tutorial.game_sp_find .pop.p1 {
  background: url(../img/game_sp_find_tu1.png) no-repeat 631px 159px / 927px 402px;
}
.tutorial.game_sp_find .pop.p1 .ani1 {
  position: absolute;
  top: 335px;
  left: 608px;
}

.tutorial.game_sp_find .pop.p2 {
  background: url(../img/game_sp_find_tu2.png) no-repeat 717px 84px / 945px 411px;
}
.tutorial.game_sp_find .pop .txt {
  position: absolute;
  top: 190px;
  left: 1247px;
}
.tutorial.game_sp_find .pop.p2 .txt {
  top: 171px;
  left: 1271px;
}

.tutorial.game_sp_find .pop .card {
  position: absolute;
  top: 343px;
  left: 719px;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.125;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
  height: 146px;
}
.tutorial.game_sp_find .pop.p2 .card {
  color: #ffffff;
}

.tutorial.game_sp_find .success {
  margin-top: 78px;
}

/* 초등 영어 신규 기능 추가 */
#cateList .cate_card > p > span {
  font-size: 24px;
  background-color: #fab100;
}

#cateList .btn_study.off::after {
  background-color: #fbc044;
}

.game_bt .btn_pass,
.result_area .next_btns > button {
  background-color: #ff622b;
}

[data-cate='puzzle'] .game_card {
  flex-direction: row;
}

[data-cate='puzzle'] .game_card .drop_area {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 100%;
  padding: 56px 40px 56px 59px;
  gap: 16px;
}

[data-cate='puzzle'] .game_card .drop_area > div {
  width: calc((100% - 32px) / 3);
  height: calc((100% - 16px) / 2);
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 1px 2px 7px 0px rgba(171, 171, 171, 0.5);
  overflow: hidden;
}

[data-cate='puzzle'] .game_card .drag_area {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 100%;
  padding: 91px 59px 91px 40px;
  gap: 16px;
}

[data-cate='puzzle'] .game_card .drag_area > div {
  width: calc((100% - 32px) / 3);
  height: calc((100% - 16px) / 2);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  cursor: pointer;
  touch-action: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-cate='puzzle'] .game_card .word_area {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: 100%;
  padding: 20px;
  gap: 10px;
}

[data-cate='puzzle'] .game_card .word_area > div {
  width: 100%;
  height: 25%;
  padding: 56px 60px 56px 40px;
}

[data-cate='puzzle'] .game_card .word_area > button {
  width: 100%;
  height: 25%;
  background-color: #fff;
  box-shadow: 1px 2px 7px 0px rgba(171, 171, 171, 0.5);
  border-radius: 30px;
  font-size: 56px;
  font-weight: 700;
  color: #000;
  border: 2px solid#cacaca;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

[data-cate='puzzle'] .game_card .word_area > button:hover {
  background-color: #e5f4e5;
  border-color: #aed7c4;
  color: #008275;
}

[data-cate='puzzle'] .game_card .word_area > button.correct {
  background-color: #00a08f;
  border-color: none;
  color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
}

[data-cate='puzzle'] .game_card .word_area > button.incorrect {
  background-color: #ff1e68;
  border-color: none;
  color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(207, 24, 85, 1), inset 0px -3px 7px 0px rgba(207, 24, 85, 0.5);
  animation: shake 0.3s ease-in-out 3;
}

[data-cate='puzzle'] .game_card.phase2 .drag_area {
  display: none;
}

[data-cate='puzzle'] .game_card.phase2 .word_area {
  display: flex;
}

.dragging-helper {
  width: 280px !important;
  height: 400px !important;
  box-sizing: border-box;
}

[data-cate='puzzle'] .game_card .drop_area > div.correct > div {
  border: none;
  background-color: transparent;
}

/* 완료된 드래그 요소 스타일 */
[data-cate='puzzle'] .game_card .drag_area .done {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 드래그 중인 요소 스타일 */
[data-cate='puzzle'] .game_card .drag_area > div.dragging {
  opacity: 0.8;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* 드롭 오버 상태 */
[data-cate='puzzle'] .game_card .drop_area > div.drag-over {
  background-color: rgba(0, 160, 143, 0.3);
  border: 2px dashed #018174;
}

[data-cate='puzzle'] .game_card .drag_area .drag-clone {
  position: fixed;
  z-index: 1000;
  width: 100px;
  height: 100px;
}

[data-cate='wrd_srch'] .game_card {
  flex-direction: row;
}

[data-cate='wrd_srch'] .game_card .img_wrap {
  width: 560px;
  height: 100%;
  overflow: hidden;
  padding-left: 110px;
}

[data-cate='wrd_srch'] .game_card .img_wrap > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-cate='wrd_srch'] .game_card .words_wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 20px;
  width: calc(100% - 670px);
  height: 100%;
  padding: 60px 110px 60px 80px;
}

/* 7x7 그리드 */
[data-cate='wrd_srch'] .game_card .words_wrap[data-grid-size='7'] {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

/* 8x8 그리드 */
[data-cate='wrd_srch'] .game_card .words_wrap[data-grid-size='8'] {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

/* 9x9 그리드 */
[data-cate='wrd_srch'] .game_card .words_wrap[data-grid-size='9'] {
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
}

[data-cate='wrd_srch'] .game_card .words_wrap > button {
  background-color: #fff;
  border: 2px solid #cacaca;
  box-shadow: inset 1px 2px 7px 0px rgba(171, 171, 171, 0.5), 0px 6px 0px 0px rgba(202, 202, 202, 1);
  border-radius: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

[data-cate='wrd_srch'] .game_card .words_wrap > button:hover {
  background-color: #e5f4e5;
  border-color: #aed7c4;
}

[data-cate='wrd_srch'] .game_card .words_wrap > button.selected {
  background-color: #00a08f;
  border-color: #018174;
  color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
}

[data-cate='wrd_srch'] .game_card .words_wrap.incorrect > button.selected {
  background-color: #ff1e68 !important;
  border-color: none;
  color: #fff;
  box-shadow: 0px 4px 0px 0px rgba(207, 24, 85, 1), inset 0px -3px 7px 0px rgba(207, 24, 85, 0.5);
}

[data-cate='wrd_srch'] .game_card .words_wrap.incorrect > button {
  pointer-events: none;
}

[data-cate='wrd_srch'] .game_card .words_wrap > button[data-part-of-word='false'] {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #999;
  cursor: not-allowed;
}

[data-cate='wrd_srch'] .game_card .words_wrap > button[data-part-of-word='false']:hover {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #999;
}

/* words_wrap에 incorrect 클래스가 적용될 때 */
[data-cate='wrd_srch'] .game_card .words_wrap.incorrect > button.selected {
  animation: shake 0.3s ease-in-out 3;
}

@keyframes touchDownAni {
  0% {
    transform: rotate(-20deg) translate(0, 0);
  }

  20% {
    transform: rotate(0) translate(0, 0);
  }

  100% {
    transform: translate(-200px, 100px);
  }
}

@keyframes moveGamePuzzleAni1 {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-200px, 100px);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.tutorial .pop .bubble.txt {
  position: absolute;
  padding: 40px;
  background-color: #c8f530;
  border-radius: 50px;
}

.tutorial .pop .bubble.txt::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #c8f530;
  z-index: -1;
}

.tutorial .pop .bubble.txt.top_left {
  border-top-left-radius: 0;
}

.tutorial .pop .bubble.txt.top_right {
  border-top-right-radius: 0;
}

.tutorial .pop .bubble.txt.bottom_left {
  border-bottom-left-radius: 0;
}

.tutorial .pop .bubble.txt.bottom_right {
  border-bottom-right-radius: 0;
}

.tutorial .pop .bubble.txt.top_left::before {
  top: -5px;
  left: -30.8px;
  transform: rotate(90deg);
}

.tutorial .pop .bubble.txt.top_right::before {
  top: -5px;
  right: -30.8px;
  transform: rotate(-90deg);
}

.tutorial .pop .bubble.txt.bottom_left::before {
  transform: rotate(-45deg);
  bottom: -5px;
  left: -38.8px;
}

.tutorial .pop .bubble.txt.bottom_right::before {
  bottom: -5px;
  right: -38.8px;
  transform: rotate(45deg);
}

.tutorial.game_puzzle .pop.p1 .img1 {
  width: 233px;
  height: 231px;
  position: absolute;
  top: 375px;
  left: 1001px;
  animation: moveGamePuzzleAni1 1.5s linear 0.5s 2 backwards;
  z-index: 2;
}

.tutorial.game_puzzle .pop.p1 .img2 {
  width: 739px;
  height: 479px;
  position: absolute;
  top: 375px;
  left: 1001px;
}

.tutorial.game_puzzle .pop.p1 .ani1 {
  position: absolute;
  top: 402px;
  left: 975px;
  z-index: 3;
  transform-origin: 80px 80px;
  animation: touchDownAni 1.5s linear 0.5s 2 backwards;
}

.tutorial.game_puzzle .pop.p1 .txt {
  width: 400px;
  word-break: keep-all;
  position: absolute;
  top: 100px;
  left: 700px;
  z-index: 3;
}

.tutorial.game_puzzle .pop.p2 .img1 {
  width: 1603px;
  height: 612px;
  position: absolute;
  top: 304px;
  left: 171px;
  z-index: 1;
}

.tutorial.game_puzzle .pop.p2 .img2 {
  width: 738px;
  height: 554px;
  position: absolute;
  top: 339px;
  left: 180px;
  z-index: 2;
}

.tutorial.game_puzzle .pop.p2 .img3 {
  width: 794px;
  height: 611px;
  position: absolute;
  top: 304px;
  left: 978px;
  z-index: 2;
  opacity: 0;
}

.tutorial.game_puzzle .pop.p2 .ani1 {
  position: absolute;
  top: 280px;
  left: 50%;
  z-index: 3;
  opacity: 0;
}

.tutorial.game_puzzle .pop.p2 .txt.t1 {
  width: 458px;
  position: absolute;
  top: 190px;
  left: 340px;
  z-index: 3;
  word-break: keep-all;
  opacity: 0;
}

.tutorial.game_puzzle .pop.p2 .txt.t2 {
  width: 458px;
  position: absolute;
  top: 112px;
  left: 1130px;
  z-index: 3;
  word-break: keep-all;
  opacity: 0;
}

.tutorial .pop .fadeIn {
  animation: fadeIn 0.2s linear 1 forwards;
}

.tutorial .pop .blink {
  animation: blink 1s linear 0.5s 1.3 forwards;
}

.tutorial .pop .focusOut {
  opacity: 0.4 !important;
  transition: opacity 0.5s;
}

.tutorial.game_puzzle .pop.p3 .img1 {
  width: 1603px;
  height: 612px;
  position: absolute;
  top: 304px;
  left: 171px;
  z-index: 1;
}

.tutorial.game_puzzle .pop.p3 .img2 {
  width: 798px;
  height: 141px;
  position: absolute;
  top: 305px;
  left: 978px;
  z-index: 1;
  opacity: 0;
}

.tutorial.game_puzzle .pop.p3 .txt.t1 {
  width: 458px;
  position: absolute;
  top: 470px;
  left: 880px;
  z-index: 3;
  word-break: keep-all;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p1 .txt {
  width: 400px;
  word-break: keep-all;
  position: absolute;
  top: 361px;
  left: 620px;
  z-index: 3;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p1 .img1 {
  width: 1350px;
  height: 551px;
  position: absolute;
  top: 340px;
  left: 285px;
  z-index: 1;
}

.tutorial.game_wrd_srch .pop.p1 .img2 {
  width: 453px;
  height: 327px;
  position: absolute;
  top: 451px;
  left: 286px;
  z-index: 1;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p1 .img3 {
  width: 819px;
  height: 550px;
  position: absolute;
  top: 340px;
  left: 816px;
  z-index: 1;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p1 .img4 {
  width: 398px;
  height: 80px;
  position: absolute;
  top: 620px;
  left: 955px;
  z-index: 1;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p1 .ani1 {
  position: absolute;
  top: 553px;
  left: 850px;
  z-index: 1;
  opacity: 0;
}

.tutorial.game_wrd_srch .pop.p2 .img1 {
  width: 1350px;
  height: 551px;
  position: absolute;
  top: 340px;
  left: 285px;
  z-index: 1;
}

.tutorial.game_wrd_srch .pop.p2 .img2 {
  width: 453px;
  height: 327px;
  position: absolute;
  top: 451px;
  left: 286px;
  z-index: 1;
  opacity: 0.3;
}

.tutorial.game_wrd_srch .pop.p2 .img3 {
  width: 819px;
  height: 550px;
  position: absolute;
  top: 340px;
  left: 816px;
  z-index: 1;
  opacity: 0.3;
}

.tutorial.game_wrd_srch .pop.p2 .img4 {
  width: 400px;
  height: 80px;
  position: absolute;
  top: 622px;
  left: 956px;
  z-index: 1;
}
.tutorial.game_wrd_srch .pop.p2 .img4.blink {
  animation: blink 1s linear 0.5s 2 forwards;
}
.tutorial.game_wrd_srch .pop.p2 .txt {
  width: 450px;
  word-break: keep-all;
  position: absolute;
  top: 331px;
  left: 830px;
  z-index: 3;
  opacity: 0;
}