.view-game .select button {
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.view-game .select button:active {
  opacity: .5;
  transform: scale(.97);
}
@media (any-hover: hover) {
  .view-game .select button:hover {
    opacity: .5;
  }
}




.view-game[data-theme="theme-light"] {
  --font-color: #333;
  --b-color: #fff;
}
.view-game[data-theme="theme-sepia"] {
  --font-color: rgb(79, 50, 28);
  --b-color: rgb(248, 241, 227);
}
.view-game[data-theme="theme-gray"] {
  --font-color: lightgray;
  --b-color: #808080;
}
.view-game[data-theme="theme-dark"] {
  --font-color: #eee;
  --b-color: #000;
}



.view-game {
  padding: 0 20px;

  background-color: var(--b-color);

  display: flex;
  flex-direction: column;

  min-height: 100dvh;
  overflow: hidden;

  font-family: 'Noto Sans KR', sans-serif;
}



.view-game .nav-game {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 9999;
}
.view-game .module-menu {
  display: flex;
  width: 100%;
  height: 52px;
}
.view-game .module-menu *:last-child {
  margin-left: auto;
}
.view-game .module-menu button {
  min-width: 52px;
  padding: 16px;
}






.view-game .title-next button {
  font-weight: bold;

  margin-top: 52px;
}




.view-game .module-title .select button,
.view-game .module-input .select button {
  font-weight: bold;

  margin-top: 52px;
}
.view-game .module-article .select {
  border-top: 1px solid;

  padding-top: 52px;

  display: flex;
  flex-direction: column;
}
.view-game .module-article .select button {
  padding: 8px 0;

  line-height: 1.8;

  font-family: 'Noto Serif KR', serif;
}
.view-game .module-character_select .select {
  display: flex;

  width: 100%;
  margin-top: 50px;
}
.view-game .module-character_select .select button {
  width: 50%;
  height: 30dvh;

  margin: 0 8px;

  font-weight: bold;

  border: 2px solid;
  border-radius: 16px;

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





.view-game .input-wrap input {
  width: 100%;

  margin-top: 52px;
}











.view-game [class*="module-"] {
  color: var(--font-color);
}






.view-game .module-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  max-width: 480px;
  min-height: 100dvh;

  margin: 0 auto;

  padding-top: 52px;
  padding-bottom: 52px;
}
.view-game .module-title h2 {
  font-size: 40px;
  line-height: 1.4;

  font-family: 'Noto Serif KR', serif;

  text-align: center;
}
.view-game .module-title .text {
  white-space: pre-wrap;

  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;

  padding-top: 13px;
}







.view-game .module-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  max-width: 480px;
  min-height: 100dvh;

  margin: 0 auto;

  padding-top: 52px;
  padding-bottom: 52px;
}
.view-game .module-input h2 {
  font-size: 40px;
  line-height: 1.4;

  font-family: 'Noto Serif KR', serif;

  text-align: center;
}
.view-game .module-input .text {
  white-space: pre-wrap;

  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;

  padding-top: 13px;
}





.view-game .module-article {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  max-width: 480px;
  min-height: 100dvh;

  margin: 0 auto;

  padding-top: 52px;
  padding-bottom: 52px;
}
.view-game .module-article h2 {
  font-size: 32px;
  line-height: 1.4;

  font-family: 'Noto Serif KR', serif;

  text-align: center;
  padding-bottom: 26px;
}
.view-game .module-article .text {
  white-space: pre-wrap;

  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;

  padding-bottom: 52px;
}







.view-game .module-character_select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  max-width: 480px;
  min-height: 100dvh;

  margin: 0 auto;

  padding-top: 52px;
  padding-bottom: 52px;
}
.view-game .module-character_select h2 {
  font-size: 32px;
  line-height: 1.4;

  font-family: 'Noto Serif KR', serif;

  text-align: center;
}
.view-game .module-character_select .text {
  white-space: pre-wrap;

  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;

  padding-top: 13px;
}





















.view-game .animation-fadein {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
.view-game .animation-fadeout {
  animation: fadeout 1s;
  -moz-animation: fadeout 1s; /* Firefox */
  -webkit-animation: fadeout 1s; /* Safari and Chrome */
  -o-animation: fadeout 1s; /* Opera */

  animation-fill-mode: forwards;
}
@keyframes fadeout {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
@-moz-keyframes fadeout { /* Firefox */
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
@-o-keyframes fadeout { /* Opera */
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}





.view-game *:empty:not(input):not(textarea):not(button):not(br) {
  display: none !important;
}











.view-game .popup-wrap {
  padding: 0 20px;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: 9997;
}
.view-game .popup-disable-button {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  z-index: 9998;

  background-color: #000;
  opacity: .5;
  width: 100%;
  height: 100%;
}
.view-game .popup-input {
  max-width: 480px;

  overflow: auto;

  width: 100%;
  margin: 20px auto;

  background-color: #fff;

  border-radius: 12px;

  z-index: 99999;

  position: relative;
}
.view-game .popup-input > header {
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
}
.view-game .popup-input > header h3 {
  opacity: .7;
}
.view-game .popup-input > section {
  padding-right: 20px;
  padding-left: 20px;
}
.view-game .popup-input > section:first-child {
  padding-top: 20px;
}
.view-game .popup-input > section > header,
.view-game .popup-input > section > .text {
  margin-top: 24px;
  margin-bottom: 8px;
}
.view-game .popup-input > section > .text {
  line-height: 1.4;
}
.view-game .popup-input > section > .small-text {
  font-size: 14px;
  line-height: 1.4;

  opacity: .6;

  margin-top: 8px;
  margin-bottom: 8px;
}
.view-game .popup-input > section > input {
  width: 100%;
  line-height: 1.6;
}
.view-game .popup-input > section > textarea {
  width: 100%;
  line-height: 1.6;
}
.view-game .popup-input-confirm-wrap {
  display: flex;
}
.view-game .popup-input-confirm-wrap button {
  color: #3391ff;

  font-weight: bold;

  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 28px;
}
.view-game .popup-input-confirm-wrap *:first-child {
  padding-left: 20px;
}
.view-game .popup-input-confirm-wrap div:last-child {
  margin-left: auto;
}
.view-game .popup-input-confirm-wrap div:last-child button:last-child {
  padding-right: 20px;
}





.view-game {
  z-index: 2;
}
.view-game,
.view-game .nav-game,
.view-game .popup-wrap,
.view-game .popup-disable-button {
  max-width: 480px;

  margin: 0 auto;
}